0

我试图弄清楚为什么 css 段不会运行'style-ext-html-webpack-plugin'。

目前我有一个.CSS包含初始屏幕规则的文件。

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

问题是，该文件永远不会运行'style-ext-html-webpack-plugin'，我不知道如何调试它。

（理想情况下，我想要一个.SCSS文件，以便它可以通过.env文件进行主题化。即：在注入一些主题颜色之后splash.scss专门提取和内联）<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:

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

1 回答 1

0

需要更新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};` }
                        }
                    ]

                })
            },
        ]
    }
};
于 2017-07-11T10:48:47.807 回答