[英]Webpack resolve-url-loader resolving incorrect paths
I'm making use of the resolve-url-loader
which is working great for importing third party stylesheets that are in turn linking to their own assets. 我正在使用
resolve-url-loader
,它非常适合导入第三方样式表,这些样式表又链接到自己的资产。
However, i'm struggling to understand how in the instance below my reference to owl.jpg
from app.scss
manages to successfully resolve? 但是,我正在努力了解在我引用
owl.jpg
的app.scss
下面的实例中如何成功解决?
Folder structure: 资料夹结构:
src/
|
|- index.html
|
|-img/
| owl.jpg
|
|- scss/
| app.scss
|
|-js/
| app.js
app.scss app.scss
These incorrect paths to the asset still seem to resolve? 这些通往资产的不正确路径似乎仍然可以解决?
.owl {
background: url('owl.jpg');
}
.owl {
background: url('/owl.jpg');
}
.owl {
background: url('img/owl.jpg');
}
Surely the path should only resolve with the below path? 当然,该路径仅应使用以下路径解析吗?
.owl {
background: url('../img/owl.jpg');
}
Am i missing something? 我想念什么吗? Is the resolve-url-loader clever enough to resolve incorrect paths??
resolve-url-loader是否足够聪明,可以解决错误的路径?
You have to compile your scss file to css, browser works only with .css
files. 您必须将scss文件编译为css,浏览器仅适用于
.css
文件。 Then choose the output folder, i guess it can be src/css
, and then enter a correct path in your css depending on images folder. 然后选择输出文件夹,我想它可以是
src/css
,然后根据图像文件夹在您的css中输入正确的路径。
If webpack compiles scss files without errors, it just could be incorrect url to image. 如果webpack编译scss文件没有错误,则它可能是不正确的图像URL。 If correct,
background-size
property should be added with 100% 100%
parameters. 如果正确,应该使用
100% 100%
参数添加background-size
属性。
.owl {
background-image: (path/to/image.img);
background-size: 100% 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.