当我将 css 与 sass 一起添加到规则时，它会出错。如果您删除 CSS 的规则，那么一切都很好。我尝试使用node-sassand sass，但没有区别。这是我的配置文件：
'use strict';
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const cleanPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
const miniCSS = require('mini-css-extract-plugin');
module.exports = function (undefined, { mode }) {
const EnvDevelopment = mode === 'development';
const EnvProduction = !EnvDevelopment;
// Configuration
return {
// Paths context
context: path.resolve(__dirname),
// Entry points
entry: {
app: './src/scripts/app.js',
},
output: {
// Output path (absolute)
path: path.resolve(__dirname, 'dist'),
// Generate hashes on production
filename: EnvDevelopment
? 'js/[name].js'
: 'js/[name].[contenthash:8].js',
// Generate filename comments on development
pathinfo: EnvDevelopment,
},
devtool: EnvDevelopment ? 'cheap-source-map' : false,
module: {
rules: [
// If remove this rule then all is fine
{
test: /.css$/,
use: [miniCSS.loader, 'css-loader'],
},
{
test: /.s[ac]ss$/,
use: [
miniCSS.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: EnvDevelopment,
},
},
],
},
],
},
plugins: [
new htmlPlugin({
template: './src/index.html',
}),
new miniCSS({
filename: EnvDevelopment
? 'css/[name].css'
: 'css/[name][contenthash:8].css',
}),
new cleanPlugin(),
],
};
};
并且有一个node js日志：
0 verbose cli [
0 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli 'run',
0 verbose cli 'dev'
0 verbose cli ]
1 info using npm@7.0.3
2 info using node@v15.0.1
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 1ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:C:\Users\nurme\OneDrive\Documents\Projects\webpack-config\.npmrc Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:C:\Users\nurme\.npmrc Completed in 1ms
11 timing config:load:user Completed in 1ms
12 timing config:load:file:C:\Users\nurme\AppData\Roaming\npm\etc\npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 10ms
19 verbose npm-session 30a9861e250e9739
20 timing npm:load Completed in 25ms
21 timing command:run-script Completed in 2744ms
22 verbose stack Error: command failed
22 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:63:27)
22 verbose stack at ChildProcess.emit (node:events:327:20)
22 verbose stack at maybeClose (node:internal/child_process:1048:16)
22 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5)
23 verbose pkgid webpack-config@0.1.0
24 verbose cwd C:\Users\nurme\OneDrive\Documents\Projects\webpack-config
25 verbose Windows_NT 10.0.19041
26 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
27 verbose node v15.0.1
28 verbose npm v7.0.3
29 error code 1
30 error path C:\Users\nurme\OneDrive\Documents\Projects\webpack-config
31 error command failed
32 error command C:\WINDOWS\system32\cmd.exe /d /s /c "webpack --mode development"
33 verbose exit 1