如何在所有生成的html文件中自动添加css导入?

如何在所有生成的html文件中自动添加css导入?,html,css,webpack,mini-css-extract-plugin,Html,Css,Webpack,Mini Css Extract Plugin,我正在项目的dist文件夹中生成多个*.html文件(使用文件加载器复制)。styles.css(从我的src文件夹中的scss文件生成)的导入存在于生成的index.html中,但不存在于位于我的src/页面中的其他生成的html文件中(也在dist文件夹中生成) 如何将styles.css导入添加到所有生成的html文件中,或者更好地添加到所有目标html文件中? const path = require('path'); const CopyPlugin = require('copy-w

我正在项目的dist文件夹中生成多个*.html文件(使用文件加载器复制)。styles.css(从我的src文件夹中的scss文件生成)的导入存在于生成的index.html中,但不存在于位于我的src/页面中的其他生成的html文件中(也在
dist
文件夹中生成)

如何将styles.css导入添加到所有生成的html文件中,或者更好地添加到所有目标html文件中?

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); // to minify JS
module.exports = {

    entry: ['@babel/polyfill', './src/js/index.js'],
    output: {

        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'

    },
    devServer: {

        contentBase: './dist'

    },
    optimization: {
        //https://webpack.js.org/plugins/mini-css-extract-plugin/
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    output: {
                      comments: /@license/i,
                    },
                  },
                extractComments: false,
            }),
            new OptimizeCSSAssetsPlugin({})
        ], // utilisés pour minifier le css généré en Production
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.s[ac]ss$/i,
              chunks: 'all',
              enforce: true,
            },
          },
        },
    },
    plugins: [
        new HtmlWebpackPlugin({

            filename: 'index.html',
            template: './src/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: false
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new CopyPlugin([
            { from: './src/assets/images', to: 'assets/images' },
            //{ from: 'other', to: 'public' },
        ]),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(html)$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,
                    interpolate: true,
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: [

                    {loader: MiniCssExtractPlugin.loader},

                    //'style-loader',

                    {
                        loader: 'css-loader',
                        options: { 
                            importLoaders: 1
                        }
                    },

                    'postcss-loader',

                    'sass-loader',

                ],
            },
            {
                test: /\.svg/,
                use: {
                    loader: 'svg-url-loader',
                    options: {}
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      name: '[name].[ext]',
                      outputPath: 'assets/images',
                      esModule: false,
                    }
                  }
                ]
            },
            {
                test: /\.html$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                },
                exclude: [
                    path.resolve(__dirname, 'src/index.html'),
                    path.resolve(__dirname, 'src/fragments')
                ]
            },
        ]
    }
};
提前感谢你的帮助