Webpack：css-loader没有解析url

尝试在src目录下的sass文件中使用图像（background-image：url（'path_to_image'））时，我收到以下错误 . 但是，我可以从index.js调用相同的文件 . 我不确定我的Webpack配置中缺少什么 .

错误

./src/sass/main.scss中的错误（./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/sass/main.scss）找不到模块：错误：无法解析'../../img/hero-small.jpg'

文件夹结构

dist
  js
  public
     css
     images

src
  img
  js
  sass
  index.js

编码her-small.jpg的代码

源目录结构更详细：

img
sass
  components
     header.scss

在header.scss中，我正在打电话

background-image: url("../../img/hero-small.jpg");

此外，输出构建css显示相同的路径

background-image: url("../../img/hero-small.jpg");

的package.json

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        new ExtractTextPlugin('./public/css/main.css')
    ],
    module: {
        rules: [{
                test:/\.js$/,
                exclude: /node_modules/,
                use:[{
                loader: "babel-loader",
                query: {presets:['es2015']}
                }]
        }, {
                test:/\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({fallback:'style-loader',use:['css-loader','sass-loader']})
            },
            {
                test:/\.(png|svg|jp(e*)g|gif)$/,
                exclude:/node_modules/,
                use:[{
                    loader: "file-loader",
                    options: {
                        name:'[name].[ext]',
                        outputPath:'./public/images'
                    }
                }]
            }
        ]
    }
};

UPDATE

基于这篇文章，我又添加了一个loader：resolve-url-loader，并将url的css-loader选项设置为false .

use：ExtractTextPlugin.extract（{fallback：'style-loader'，使用：[{loader：'css-loader'，options：{url：false}}，'resolve-url-loader'，'sass-loader'] }）经过进一步的研究，我发现了sass-loader github页面上描述的问题：

由于Sass / libsass不提供URL重写，因此所有链接的资产必须相对于输出 . 如果您只是生成CSS而不将其传递给css-loader，那么它必须与您的Web根目录相关 . 如果将生成的CSS传递给css-loader，则所有URL必须相对于entry-file（例如main.scss） . 更有可能你会被这第二个问题打乱 . 期望相对引用可以针对指定它们的.scss文件进行解析（比如常规的.css文件） . 值得庆幸的是，这个问题有两个解决方案：使用resolve-url-loader添加丢失的URL重写 . 将它放在装载链中的sass-loader之前 . 库作者通常提供一个变量来修改资产路径 . 例如bootstrap-sass有一个$ icon-font-path .

use：ExtractTextPlugin.extract（{fallback：'style-loader'，使用：[{loader：'css-loader'，options：{url：false}}，'resolve-url-loader'，'sass-loader'] }）添加上面的更改后，构建传递，但我的输出dist文件夹中的最终url与我在源文件夹（../../img/hero.jpg）中提供的路径相同，这导致了一个错误路径 .

作为临时解决方案：

我已将图像导入到我的index.js文件中，并让文件加载器将图像从我的src目录加载到dist / public / images目录 . 我在dist / public / images中提到了main.sass中的图像，希望它可用 . 虽然它不是一个万无一失的解决方案，但我希望已经有一个我不了解的更简单的解决方案 . 对此有任何帮助非常感谢 .