相关疑难解决方法(0)

Webpack + file-loader + sass-loader无法解析CSS背景图像的相对路径.

已编译的SCSS文件包含/dist/相对于SCSS/CSS文档而不是相对于SCSS/CSS文档的背景图像的路径.我研究过这个问题; sass-loader建议使用resolve-url-loader(带源映射).但是,添加resolve-url-loader对编译的CSS没有任何区别.

我已经能够通过在文件加载器上将'publicPath'设置为'../ ..'来解决此问题.或者通过禁用css-loader上的"url"设置.两者都不是一个好的解决方案,并且会导致复制文件和通过HTML或其他来源引用图像时出现问题.

Webpack和CSS的在线示例将CSS和图像放在同一个文件夹中(通常在根目录中).这不是我的webpack实现的最佳选择.在子文件夹中构造文件的概念似乎是一个相当基本的要求.这只是错误的做法吗？

运行Webpack ^ 3.5.1.Sass-loader ^ 6.0.6.文件加载器^ 0.11.2.Css-loader ^ 0.28.4.

文件结构

example/
??? dist/
?   ??? assets
?   ?   ??? media
?   ?   ?   ??? logo.png
?   ?   ??? styles
?   ?       ??? app.css
?   ?       ??? app.css.map
?   ??? index.html
?   ??? app.bundle.js
??? src/
    ??? assets
    ?   ??? media
    ?   ?   ??? logo.png
    ?   ??? styles
    ?       ??? app.scss
    ??? app.js

app.scss

body {
  background: url(../media/logo.png);
}

app.css …