"Extracting CSS" section in README.md should mention mini-css-extract-plugin

[daubaris]

The mentioned section should replace extract-text-webpack-plugin with mini-css-extract-plugin as extract-text-webpack-plugin is deprecated since webpack v4.

[SassNinja]

Exactly what I thought!
extract-text-webpack-plugin shouldn't get propagated anymore since it's officially deprecated
https://github.com/webpack-contrib/extract-text-webpack-plugin

[nergmada]

Hi, I'm having a similar issue with how to use the EmitCss plugin along side svelte-loader. I just started doing production builds and all my styling has disappeared, but mini-css-extract-plugin doesn't seem to be creating corresponding css files for my pages.

I've essentially got a bunch of SPAs which stitch together using server side routing, e.g. one JS per page, consisting of a single top level svelte component, then embedded into a HTML template (using pug) and delivered to the client as if it was a regular SPA.

The problem is, that in production mode, none of my CSS gets emitted i.e. what I want is something like "signup.js" which would be the svelte javascript for the signup page, and a corresponding "signup.css" which can be embedded along side it.

I've included parts of my webpack config below

{
        name: 'my-app',
        mode,
        target: 'web',
        entry: fs.readdirSync(path.resolve(__dirname, './client/pages')).reduce((prev, k) => ({
            ...prev,
            [k]: `./client/pages/${k}/index.js`
        }), {}),
        output: {
            path: path.resolve(__dirname, './build/static'),
            filename: '[name].js'
        },
        resolve: {
            alias: {
                svelte: path.resolve('node_modules', 'svelte'),
                components: path.resolve('client', 'components'),
                stores: path.resolve('shared', 'stores'),
                views: path.resolve('client', 'views'),
                styles: path.resolve('client', 'styles'),
                lib: path.resolve('shared', 'lib')
            },
            extensions: ['.mjs', '.js', '.svelte'],
            mainFields: ['svelte', 'browser', 'module', 'main']
        },
        module: {
            rules: [
                {
                    test: /\.(html|svelte)$/,
                    //exclude: /node_modules/,
                    use: {
                        loader: 'svelte-loader',
                        options: {
                            emitCss: true,
                            hotReload: dev
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        dev ? 'style-loader' : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                            }
                        }
                    ]
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        // Creates `style` nodes from JS strings
                        dev ? 'style-loader' : MiniCssExtractPlugin.loader,
                        // Translates CSS into CommonJS
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                            }
                        },
                        // Compiles Sass to CSS
                        'sass-loader',
                    ],
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: '[name].[id].css',
            }),
            new CopyPlugin([
                './client/template.pug',
                { from: 'assets/**/*', context: 'client' }
            ]),
        ]
    }

As you can see I use a flag dev which basically switches between the regular style loader and mini-css depending on the build type. Unfortunately it only outputs CSS for three of my pages, and the only reason I think it does it for these pages is because they contain svelte-select which is a svelte-component I use.

I'd be happy to write a readme update on this, if I can get it working, so that other people don't fall into this pit.

(P.s. the reason I'm not using Sapper is because I tried to move to sapper, but couldn't get it to work with webpack, and when I asked in the discord everyone was like "use rollup")

Sorry to be a bother and thanks in advance
-Adam

[nergmada]

I was being an idiot, and I had sideeffects: true in my package.json which was leading mini-css to drop pretty much all my CSS. Still as promised, an update to the readme