CODEWITHSUNDEEP
webpack-2html-webpack-pluginextracttextwebpackplugin
Nitsan Baleli
Nitsan Baleli

Reputation: 5458

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

Im trying to figure out why a css segment will not run through 'style-ext-html-webpack-plugin'.

Currently I have a .CSS file with rules for the splash screen.

It's being extracted using 'extract-text-webpack-plugin' and injected to the template's <head> with 'extract-text-webpack-plugin'.

problem is, the file never gets run through 'style-ext-html-webpack-plugin' and I can't wrap my head around how to debug it.

(Ideally, I'd like to have a .SCSS file so it can be themeable through a .env file. i.e: have splash.scss exclusively extracted and inlined in the <head> after being injected with some theme colors)

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';

Upvotes: 0

Views: 412

Answers (1)

Nitsan Baleli
Nitsan Baleli

Reputation: 5458

Needed to update html-webpack-plugin to 2.29.0.

I've managed to solve this issue, using a sass file that can be themeable with variables from .env file:

I had to explicitly exclude the splash file from the normal sass flow and create another loader definition explicitly for it:

...
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};` }
                        }
                    ]

                })
            },
        ]
    }
};

Upvotes: 0

Related Questions