Question

我试图找出为什么css段不贯穿'style-ext-html-webpack-plugin'。

目前我有一个.CSS文件，其中包含启动画面的规则。

使用'extract-text-webpack-plugin'提取并使用<head>将其注入模板的'extract-text-webpack-plugin'。

问题是，该文件永远不会通过'style-ext-html-webpack-plugin'运行，我无法理解如何调试它。

（理想情况下，我希望有一个.SCSS文件，因此可以通过.env文件进行主题化。即：splash.scss专门提取并内联{{1}注入一些主题颜色后）

<head>

webpack.config.js:

.... const ExtractTextPlugin = require('extract-text-webpack-plugin'); //used for above-the-fold css (such as splash-screen) const StyleExtHtmlPlugin = require('style-ext-html-webpack-plugin'); const extractSplashCSS = new ExtractTextPlugin('splash.css'); module.exports = { entry: {...}, output: {...}, resolve: {...}, plugins: [ ..., new HtmlWebpackPlugin({ title: enviroments.TITLE, splashScreenTitle: enviroments.SPLASH_SCREEN_TITLE, template: 'src/index.html', cache: true, favicon: enviroments.FAVICON || './src/assets/images/favicon.ico', inject: 'body' }), extractSplashCSS, new StyleExtHtmlPlugin('splash.css') ], module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url-loader?import=false', exclude: [path.join(path.resolve('./src'), 'common/app/splash.css')] }, { test: /\.css$/, loader: extractSplashCSS.extract({ use: 'css-loader' }), include: [path.join(path.resolve('./src'), 'common/app/splash.css')] }, { test: /\.scss$/, use: [ 'style-loader', 'css-loader?importLoaders=1', { loader: 'postcss-loader', options: { plugins: function() { return [require('autoprefixer')]; } } }, 'resolve-url-loader?sourceMap', { loader: 'sass-loader?sourceMap', options: { includePaths: path.resolve('./src'), data: ` $color-primary: ${theme.PRIMARY}; .... ` } } ] }, .... ] } };

index.js:

Answer 1

需要将html-webpack-plugin更新为2.29.0。

我设法使用sass文件解决了这个问题，该文件可以使用.env文件中的变量进行主题化处理：

我必须从普通的sass流中明确地排除splash文件，并为它明确地创建另一个加载器定义：

...
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //used for above-the-fold css (such as splash-screen)
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...
        new HtmlWebpackPlugin({
            ...
        }),
        new ExtractTextPlugin('splash.css'),
        new StyleExtHtmlWebpackPlugin('splash.css'),
    ],
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url-loader?import=false' },
            {
                test: /\.scss$/,
                exclude: [path.join(path.resolve('./src'), 'common/app/splash.scss')],
                use: [
                    .....
                ]
            },

            {
                test: /\.scss$/,
                include: [path.join(path.resolve('./src'), 'common/app/splash.scss')],
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {minimize: true}
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [require('autoprefixer')];
                                }
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: { data: `$color-primary: ${theme.PRIMARY};` }
                        }
                    ]

                })
            },
        ]
    }
};

webpack：用于启动画面的内联css（在折叠css上方）

1 个答案: