Webpack 4無法正確解析SCSS中的url（）

Question

我在下面將我的Webpack配置發布到了生產環境中。 我正在嘗試使用background-image: url(../img/chevron-thin-right.svg); 在我的一個SCSS文件中，但是它被解析為background-image: url([object Module]) ，因此無法正常工作。 我正在嘗試將純SCSS和HTML項目移植到Webpack捆綁的react應用程序中，因此上述方法可以正常工作。 任何修復將不勝感激。

webpack.common.js

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const outputDirectory = 'dist'; module.exports = { entry: './src/client/index.js', output: { path: path.join(__dirname, outputDirectory), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'Production', template: './public/index.html', favicon: './public/favicon.ico', hash: true, filename: 'index.html' }) ], module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\\.(jpg|png|woff|woff2|eot|ttf)$/, use: { loader: 'file-loader?limit=100000&name=images/[name].[ext]' } }, { test: /\\.svg$/, use: [ "babel-loader", { loader: "react-svg-loader", options: { svgo: { plugins: [ { removeTitle: true, removeComments: true } ], floatPrecision: 2 } } } ] } ] } }; 

webpack.prod.js

 const merge = require('webpack-merge'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const common = require('./webpack.common.js'); const path = require('path'); const autoprefixer = require('autoprefixer'); module.exports = {}; module.exports = merge(common, { mode: 'production', optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\\.css$/, chunks: 'all', enforce: true } } } }, plugins: [ new CleanWebpackPlugin(['dist']), new MiniCssExtractPlugin({ filename: '[name].css' }) ], module: { rules: [ { test: /\\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { sourceMap: true, root: path.resolve(__dirname), }, }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ autoprefixer({ 'browsers': ['last 2 versions', 'ie >= 10'], }), ], sourceMap: true, }, }, { loader: 'sass-loader', options: { outputStyle: 'compressed', sourceMap: true, includePaths: [ './src/client/style/scss', ], }, } ] } ] } }); 

Answer 1

萬一其他人正在尋找答案，我就能解決。 這是由於未通過url加載器加載關聯的SVG。 重新添加svg時出現了另一個問題，因為我想用作React組件的嵌入式SVG遇到了錯誤，因為它們現在通過url加載器而不是我的react-svg加載器。

下面是正常工作的webpack.common.js和webpack.prod.js。 解決方案是通過將所有內聯擴展名從.svg轉換為.inline.svg並相應地調整webpack配置，以區分我的內聯和外部SVG

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const outputDirectory = 'dist'; module.exports = { entry: './src/client/index.js', output: { path: path.join(__dirname, outputDirectory), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'Production', template: './public/index.html', favicon: './public/favicon.ico', hash: true, filename: 'index.html' }) ], module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\\.(jpg|png|woff|woff2|eot|ttf|svg)$/, exclude: /\\.inline.svg$/, use: { loader: 'url-loader?limit=1000&name=images/[name].[ext]' } }, { test: /\\.inline.svg$/, use: [ "babel-loader", { loader: "react-svg-loader", options: { svgo: { plugins: [ { removeTitle: true, removeComments: true } ], floatPrecision: 2 } } } ] } ] } };