Question

我正在使用resolve-url-loader，它非常适合导入第三方样式表，而第三方样式表又链接到自己的资产。

但是，我很难理解在owl.jpg app.scss src/ | |- index.html | |-img/ | owl.jpg | |- scss/ | app.scss | |-js/ | app.js对.owl { background: url('owl.jpg'); } .owl { background: url('/owl.jpg'); } .owl { background: url('img/owl.jpg'); }的引用设置成功解决的情况下如何实现？

文件夹结构：

.owl {
    background: url('../img/owl.jpg');
}

app.scss

这些不正确的资产路径似乎仍在解决？

$ sudo npm install gulp-usemin --save-dev
$ sudo npm install gulp-livereload --save-dev
$ sudo npm install gulp-util --save-dev

当然，路径只能通过以下路径解决？

var usemin = require('gulp-usemin');
var livereload = require('gulp-livereload');
var gutil = require('gulp-util'); //gutil for error display

gulp.task('usemin',['jshint'], function(){
    return gulp.src('./app/index.html')
    .pipe(usemin({
        css: [minifycss(),rev()],
        scripts: [uglify().on('error', function(err) {gutil.log(gutil.colors.red('[Error]'), err.toString());this.emit('end');}),rev()]
    })) 
    .pipe(gulp.dest('dist'))
    .pipe(livereload());
});

Change the js: [uglify(), rev()] to scripts: [uglify(), rev()]

我错过了什么吗？ resolve-url-loader是否足够聪明以解决错误的路径？

Answer 1

您必须将scss文件编译为css，浏览器仅适用于.css个文件。然后选择输出文件夹，我猜它可以是src/css，然后根据图像文件夹在css中输入正确的路径。

如果webpack编译没有错误的scss文件，那么它可能是不正确的图像url。如果正确，background-size属性应添加100% 100%参数。

.owl {
  background-image: (path/to/image.img);
  background-size: 100% 100%;
}

Webpack resolve-url-loader解析错误的路径

1 个答案: