avoid redundant sass imports in webpack3 client bundle's

Question

I am having a problem, that the common sass styles in my reactjs project end up redundantly in the client bundle…

1) I have a set of base styles:

/src/frontend/sass/
    base.scss  the master file, which imports the following…
    ├ common.sass
    ├ colors.sass
    ├ breakpoints.sass
    ├ forms.sass
    └ ...

2) and a webpack project with '.sass' Files per component…

Input/style.sass
Modal/style.sass
TeaserPage/style.sass
…

3) every component style files get's an '@import base.scss' injected in webpack.config, such that I can access variables, mixins or extend a class...

        {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            data: `@import '${resolve(__dirname, 'src', 'frontend', 'sass').replace(/\\/g, '/')}/base';`,
                            sourceMap: false
                        }
                    }
                ]
            })
        },

That's all fine for development (with react-hot-loader), but in release mode, when I want to build a compact client-bundle, this leads to 40x-fold redundancy (…coming from 40 components).

The problem is →certainly →not →new, still what would be a proper solution with webpack 3?

Concatenation first, processing then?
A (working, non-outdated) import-once module?
(terrible workaround): keeping variables/mixins vs. base styles separate (that would tear forms or breakpoints to pieces)

or could I somehow do a webpack config like...?

(read ↑bottom up↑, if I understand webpack syntax correctly…)

use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
        {
            loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader',
            3) do your sass→css conversion and post thing
        {
            loader: 'sass-loader',
            2) ...load (concatenate to 1) component styles
        },
        {
            loader: 'sass-loader',
            1) ...load that base.sass
        },

    ]
})

…or is there a non-outdated (or these-days-even-included in webpack itself?) sass-import-once functionality somewhere?

I found the optimize-css-assets-webpack-plugin (for webpack 3 you need @3.2.0) which works as some kind of fix. Cleans up the mess as the final stage, but is not, what I would rather want (that is: avoid creating the mess by importing once / concatenation first …).

use **extend** or **mixin**. Wrap all your *base.scss* classes inside inside a mixin or function or partials. Call where ever you want. You can import it n-number of times but will not cause redundancy or repeated code spitting out. — NiRUS, Jun 01 '18 at 11:48
mixins can contain (not only properties or maybe sub-classes but) a full set of sass files? – do you have a sample? — Frank N, Jun 01 '18 at 11:53

avoid redundant sass imports in webpack3 client bundle's

0 Answers0