webpack：用于初始屏幕的内联 css（首屏 css）

Question

我想弄清楚为什么 css 细分不会运行到 'style-ext-html-webpack-plugin'。

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

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

问题是，该文件从未通过 'style-ext-html-webpack-plugin' 获得运行，我不知道如何调试它。

（理想情况下，我想要一个 .SCSS 文件，以便可以通过 .env 文件对其进行主题化。即：在 splash.scss 中专门提取和内联=17=]注入一些主题颜色后)

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:

...
// above the fold css
import 'common/app/splash.css';

Answer 1

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

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

我必须明确地将启动文件从正常 sass 流程中排除，并为其明确创建另一个加载程序定义：

...
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）

webpack: Inline css for a splash screen (above the fold css)

html-webpack-plugin

webpack-2

extracttextwebpackplugin