css - 在 Webpack 5 中转换 SCSS 文件而不是 CSS 文件的正确方法

Question

我有两个样式表入口点。

1. src/css/preprocess.scss
2. src/css/skippreprocessing.css

我希望我的 Webpack 5 项目预处理SCSS文件，而不是CSS文件——我希望CSS文件按原样发布到dist文件夹中。

我在下面列出了我的最佳猜测。但它有问题；它打破了热重载。或者更确切地说，热重载仅适用于未预处理的文件。这就像两条规则以某种方式联系在一起（我猜是因为共享的 MiniCssExtractPlugin）。

所以我想知道，让这两个规则（处理 CSS 文件和 SCSS 文件）被视为完全独立的事情的正确方法是什么。

（注意：在我的实际情况中，我也在编译 JS 文件，但为了简洁起见，我删除了下面的那些。）

我最好的猜测

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    target: 'web',
    entry: {
        preprocess: [
            './src/css/preprocess.scss',
        ],
        skippreprocessing: [
            './src/css/skippreprocessing.css',
        ]
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].min.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
            minify: false,
        }),
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, './dist'),
        },
        hot: true,
        port: 8080,
    },
};

标签： csswebpackwebpack-dev-serverwebpack-style-loaderwebpack-5