同时使用Sass和CSS时的冲突

Question

当我向规则中添加css和sass时，会给出一个错误。如果您删除CSS的规则，那么一切都很好。我试着用node-sass 和 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(),
        ],
    };
};

，并且有一个节点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

Answer 1

这个问题很容易解决。结果，我忘了在正则表达式中放反斜杠。必要的时候是/.s[ac]ss$/，/\.s[ac]ss$/