1

我无法理解如何将我的 scss 文件编译和缩小为 css，同时保持相同的文件夹和文件结构。我正在使用 MiniCssExtractPlugin 提取所有内容，以及 style-loader、css-loader、postcss-loader 和 sass-loader

这是我的 src 文件夹中的文件结构

在此处输入图像描述

app.scss包含所有导入。从文件夹 1-7 导入。我首先遇到了导入问题，然后在编译和最小化剩余的 scss 文件时遇到了问题。

最终目标是使编译后的文件夹看起来像这样，每个文件都被最小化，并且 app.scss 捆绑所有导入

在此处输入图像描述

这是迄今为止我为 webpack.config.js 编写的代码

plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[id].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'postcss-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } },
                ]
            }
        ]
    },
    optimization: {
        minimizer: [new TerserJSPlugin({extractComments: false}), ],
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](lodash)[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },

运行此代码时，我只是在不包含导入的 css 文件夹下获得了一个 app.css 文件，并且也没有包含其他文件。有人可以帮助我了解我需要采取的过程吗？我一直在阅读每个加载程序的文档，并没有真正理解我在寻找什么。

谢谢！

4

0 回答 0