css - 如何使用 Grunt 在生产环境中从 SCSS 加载图像？

Question

我在生产模式下加载图像时遇到问题。我如何正确构建它？

登录页面的scss代码:

.admin-login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 400px;
    border-radius: 5px;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }

  &::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    content: " ";
    background: url('assets/img/loginbg.jpg');
  }
}

我的文件夹结构:

这给了我:

这是我的 gulp 任务:

gulp.task('scripts', function(){
    gulp.src(PATH_JS_SRC + 'main.js')
        .pipe(concat('app.js').on('error', sass.logError))
        .pipe(uglify())
        .on('error', function (err) { util.log(util.colors.red('[Error]'), err.toString()); })
        .pipe(gulp.dest(PATH_DIST_JS));
});


gulp.task('sass', function(){
    gulp.src(PATH_CSS_SRC + 'main.scss')
        .pipe(concat('app.css'))
        .pipe(sass({ outputStyle: "compressed" }).on('error', sass.logError))
        .pipe(min({ compatibility: 'ie8' }))
        .pipe(gulp.dest(PATH_DIST_CSS));
});

gulp.task('sass-admin', function(){
    gulp.src(PATH_CSS_SRC + 'admin.scss')
        .pipe(concat('admin.css'))
        .pipe(sass({ outputStyle: "compressed" }).on('error', sass.logError))
        .pipe(min({ compatibility: 'ie8' }))
        .pipe(gulp.dest(PATH_DIST_CSS));
});

我做错了什么？有什么建议吗？

Answer 1

您的 SCSS 正在调用位于 dist/css/assets/img/loginbg.jpg 的图像，但实际图像的路径位于 /assets/img/loginbg.jpg。

一个快速修复方法是在终端中使用 mv/assets/img/loginbg.jpg/dist/css/assets/img/loginbg.jpg 将当前图像复制到正确的路径，但我们需要知道您正在使用的框架或环境，并查看您的 Gulp 文件的其余部分和整个元素结构，以提供更多帮助。