我正在尝试在我的react webpack项目上运行SASS汇编,并继续遇到此错误:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin
遵循本教程的指南:链接
这是我的webpack.config.js
有什么建议吗?
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new ExtractTextPlugin('dist/styles/main.css', {
allChunks: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
当您的NODE_ENV
不是production
时,您不包括任何插件。
plugins: debug ? [] : [
new ExtractTextPlugin('dist/styles/main.css', {
allChunks: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
所以当debug
为True时,您将拥有
plugins: []
但是您仍在.scss
加载器中使用它。
要解决它,您也可以将其添加到这些插件中(因此您没有像UglifyJsPlugin
这样的生产插件):
plugins: debug
? [
new ExtractTextPlugin("dist/styles/main.css", {
allChunks: true
})
]
: [
new ExtractTextPlugin("dist/styles/main.css", {
allChunks: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
]
或您不使用.scss
加载程序中的ExtractTextPlugin
(这不会将其提取到开发中的CSS文件):
{
test: /.scss$/,
loader: debug ? 'css!sass' : ExtractTextPlugin.extract('css!sass')
}
因此,我通过安装样式加载程序,CSS-Loader和Sass-Loader解决了此问题。
npm install style-loader css-loader sass-loader --save-dev
然后我这样使用了它们。
{
test: /.scss$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"),
},
由于参数的不正确格式 - 参考这个 ->https://github.com/webpack-contrib/extract-text-text-webpack-plugin/issues/207
我的代码看起来像这样 module: {
rules: [
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}]
},
plugins: [
new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })
]