Webpack SCSS 配置

Question

我有以下 webpack 设置：

let config= {
    mode: 'development',
    entry:  {
        'templates': '/usr/local/var/www/project/src/ts/entry/templates.ts',
        'templates2': '/usr/local/var/www/project/src/ts/entry/templates2.ts',
        'main_scss': '/usr/local/var/www/project/src/sass/entry/main_scss.scss',
        'templates': '/usr/local/var/www/project/src/sass/entry/templates.scss'
    },
    output: {
        path:  path.resolve(__dirname, 'public/assets'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(ts)$/,
                use: [
                    'ts-loader',
                ],
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],

            },
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: "[name].css",
        })
    ]


};

结果是一个文件夹，每个 .ts 文件有一个 .js 文件，每个 .s 文件有 2 个文件css。（main_scss.scss 结果为 main_scss.bundle.js 和 main_scss.css）

为什么？我希望将 .scss 文件捆绑到 .css 中。

谢谢亚龙

Answer 1

这是因为您指定有多个输出包，即每个入口点一个包。此外，每个包是唯一命名，基于每个入口点的文件名，如以下代码行所指定：

filename: '[name].bundle.js'.

'[name]' 将为每个入口点动态替换 基础文件名，即：templates、templates2、main_scss、和 templates（用于您的样式）并将其与 'bundle.js' 连接起来，产生 多个唯一命名的包 ，即：

templates.bundle.js

templates2.bundle.js

main_scss.bundle.js

有关如何创建输出包的深入说明，请查看 Webpack's documentation 以了解输出包。

话虽这么说，你从我上面提到的解释中得到了一个 main_scss.bundle.js，你从你的 MiniCssExtractPlugin 插件中得到了一个 main_scss.css 样式文件。 MiniCssExtractPlugin 正在提取您的 SASS 文件并将它们转换为等效的 CSS 文件。您正在使用以下代码行指定此 SASS 到 CSS 提取：

plugins:[ new MiniCssExtractPlugin({ filename: "[name].css", }) ]

请注意，此处再次使用 [name]，因此每个生成的 CSS 文件也将根据每个 SASS 文件的基础文件名进行唯一命名。如果您只希望捆绑包包含您的 JavaScript 文件并生成单个 CSS 文件，我会尝试以下操作：

创建一个 未根据每个入口点的文件名唯一命名的单个包， 类似于以下内容：

output: { path: path.resolve(__dirname, 'public/assets'), filename: 'bundle.js' },

删除多个 CSS 入口点，而是创建一个 main.scss 文件。此文件的唯一目的是导入项目的所有其他 SASS 文件。

添加在步骤 2 中创建的这个文件作为入口点。

这将生成一个 JavaScript 包：bundle.js 和一个 CSS 文件：main.css，它将包含您应用程序的所有 JavaScript 和造型分别。您可以简单地 link 您生成的 JavaScript 包和 index.html 页面中相应的 CSS 文件。

希望对您有所帮助！

Webpack SCSS 配置

Webpack SCSS config

webpack

mini-css-extract-plugin