在css中将图像url作为背景导入时出现Webpack错误答案

【问题标题】：Webpack error while importing an image url as background in css在css中将图像url作为背景导入时出现Webpack错误
【发布时间】：2021-03-07 09:45:53
【问题描述】：

我正在向我的 scss 文件中的部分添加背景图像。线性渐变是为了使图像变暗。网址是正确的，我很确定。

    background-image: url(../../assets/img/hero-bg.jpg),
        linear-gradient(rgba(black, 0.3), rgba(black, 0.3));
    height: 1980px;

我收到以下错误 -

ERROR in ./src/sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/sass/main.scss)

模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：

通过 html 加载的图像正常。这是我的 webpack 配置 -

    rules: [
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/i,
            use: [ 'style-loader',
                'css-loader',
                'sass-loader',
            ],
        },
        {
            test: /\.html$/i,
            use: ['html-loader'],
        },
        {
            test: /\.(svg|jpeg|jpg|png|gif)$/i,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[hash].[ext]',
                    publicPath: path.resolve(__dirname, '/assets/img'),
                    outputPath: 'assets/img',
                },
            },
        }
    ],

plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
        filename: '[name].css',
    }),
    new HtmlWebpackPlugin({
        template: '/src/template.html',
    }),
],

有人能解决这个问题吗？

【问题讨论】：

标签： javascript html webpack sass

【解决方案1】：

style-loader 没有sourceMap 选项，请按照https://github.com/webpack-contrib/sass-loader#sourcemap 将其设置为css-loader 或sass-loader。

【讨论】：

感谢您的提示，但我更早意识到我的错误并删除了它。它仍然没有解决我的问题
然后更新你的帖子，让我们看看发生了什么。
我看到你只在stackoverflow.com/posts/64989401/revisions这里更新你的配置，如果你仍然有同样的错误，那就没有意义了。
我之前更新了错误？你看不出来吗？
删除您的background-image 会修复错误吗？如果是，那么它可能有问题。