如何使用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.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文件和整个项目结构的帮助除此之外。

Answer 2

哦，我解决了这个刚刚放置的图像路径background: url('/../bluesky/assets/img/loginbg.jpg') no-repeat;只需要整个项目路径。