webpack的新功能,
尝试使用scss
将css
文件导出到mini-css-extract-plugin
失败,
我收到此错误:
ERROR in ./assets/src/css/style.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/mini-css-extract-plugin/dist/loader.js??ref--5-3!./assets/src/css/style.scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
身体{ |背景颜色:绿色; | }
这是webpack.config.js
文件的内容。
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './assets/src/js/main.js',
plugins: [
// Adding our UglifyJS plugin
new UglifyJSPlugin(),
new MiniCssExtractPlugin()
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'assets/dist/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
},
//sass
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
},{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
filename: "./assets/dist/css/style.css",
chunkFilename: "[name].css"
}
}
]
},
// css
{
test: /\.css$/,
loader: 'style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
minimize: true
}
}
]
}
};
这是style.scss
文件的完整内容
body{
background-color: green;
}
缺少的装载程序是什么? 问题是什么? 我读了几个答案,但没有成功。