Sass与svg-sprite-loader结合使用时出现“ExtractPluginMissingException”错误的解决方案
本文针对在Sass文件中使用svg-sprite-loader加载SVG图片时出现的“ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin”错误提供解决方案。该错误提示在提取模式下使用svg-sprite-loader需要相应的Webpack插件。
问题原因在于，svg-sprite-loader在提取模式（extract mode）下工作时，需要一个插件来将生成的CSS文件单独提取出来。 svg-sprite-loader将SVG文件转换为Sprite图片，并将Sprite图片的引用信息写入CSS文件。在提取模式下，这个CSS文件需要被单独处理，而svg-sprite-loader自身无法完成此操作，因此需要借助Webpack插件。
解决方法：
安装并配置Extract Text Webpack Plugin或MiniCssExtractPlugin。 require.context方法可以加载SVG文件，但它不涉及Sass文件的处理，因此不会引发此错误。 错误的根本原因在于提取模式下缺少必要的插件。
安装插件：
npm install --save-dev extract-text-webpack-plugin // 或 npm install --save-dev mini-css-extract-plugin
配置Webpack： 具体的配置方法取决于所使用的插件版本和Webpack版本，请参考对应插件的官方文档。 以下是一个使用MiniCssExtractPlugin的示例（请根据你的实际情况调整）：
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ... other configurations ...
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, // 将此loader放在最前面
"css-loader",
"sass-loader",
{
loader: 'svg-sprite-loader',
options: {
// svg-sprite-loader options
}
}
]
},
// ... other rules ...
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
// ... other plugins ...
],
// ... other configurations ...
};
如果希望同时使用Sass引入和require.context方法，确保在使用Sass引入SVG时正确配置了Extract Text Webpack Plugin或MiniCssExtractPlugin，并且svg-sprite-loader的配置也正确。
由于缺少原始的Webpack配置文件，以上只是一个示例。 请根据你的实际项目配置进行调整。 解决问题的关键在于安装并正确配置相应的Webpack插件来处理提取的CSS文件。
