Webpack 不会编译带有背景图像的 SASS

Question

我在编译 SASS 代码时遇到问题。\n我想使用背景图像，但当我尝试此操作时，我的所有 css 都停止工作。

\n\n

我的 SASS 文件看起来像这样

\n\n

@import "~bootstrap/scss/bootstrap";\n@import "constants";\n\n#crossroad {\n  position:relative;\n  background-image: url("../assets/bg.jpg");\n}\n

\n\n

我的 Webpack.config

\n\n

const path = require(\'path\');\n\nmodule.exports = {\n  entry: \'./src/app.js\',\n  output: {\n    filename: \'bundle.js\',\n    path: path.resolve(__dirname, \'dist\')\n  },\n  mode: "development",\n  module: {\n    rules: [\n      {\n        test: /\\.(scss|png|jpg)$/,\n        use: [\n          {\n            // Adds CSS to the DOM by injecting a `<style>` tag\n            loader: \'style-loader\'\n          },\n          {\n            // Interprets `@import` and `url()` like `import/require()` and will resolve them\n            loader: \'css-loader\'\n          },\n          {\n            // Loader for webpack to process CSS with PostCSS\n            loader: \'postcss-loader\',\n            options: {\n              plugins: function () {\n                return [\n                  require(\'autoprefixer\')\n                ];\n              }\n            }\n          },\n          {\n            // Loads a SASS/SCSS file and compiles it to CSS\n            loader: \'resolve-url-loader\'\n          },\n          {\n            // Loads a SASS/SCSS file and compiles it to CSS\n            loader: \'sass-loader\'\n          }\n        ]\n      }\n    ]\n  }\n};\n

\n\n

错误信息：

\n\n

\n

./src/assets/bg.jpg 中的错误（./node_modules/css-loader/dist/cjs.js!./node_modules /postcss-loader/src??ref--4-2!./node_modules/resolve- url-loader!./node_modules/sass-loader/dist/cjs.js!./src/assets/bg.jpg)
\n 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：
\n SassError：“\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd”后的 CSS 无效：预期为“{”，在
/Users 的第 1 行为“”\n /adrianmindek/Code/PersonalPage/src/assets/bg.jpg

\n\n

\n

\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd \
n ^
\n @ ./src/assets/bg.jpg 2:26-236
\n @ ./node_modules /css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref-- 4-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs .js!./src/scss/app.scss
\n @ ./src/scss/app.scss
\n @ ./src/app.js

\n

\n

\n\n

我尝试添加resolve-url-loader到我的 webpack 配置中，但没有任何改变。

\n

Answer 1

您应该像这样使用文件加载器处理文件

rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]

您可以从这里查看代码