Webpack: встроенный CSS для заставки (выше сгиба CSS)

Question

Webpack: встроенный CSS для заставки (выше сгиба CSS)

Я пытаюсь выяснить, почему сегмент 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 исключительно извлечены и встроены в <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';

0

webpack-2 html-webpack-plugin extracttextwebpackplugin

Источник

user2460773 09 июл '17 в 16:10

1 ответ

Решение

Другие вопросы по тегам webpack-2 html-webpack-plugin extracttextwebpackplugin

user2460773 11 июл '17 в 10:48 2017-07-11 10:48 · Accepted Answer · 2017-07-11 10:48

Необходимо обновить 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};` }
                        }
                    ]

                })
            },
        ]
    }
};