Global .scss declarations (variables etc...) without ejecting

Is your proposal related to a problem?

Yes, currentlly it isn’t possible to globally load .scss files without needing them to be imported in every .scss files.

This issue is merely a duplicate of #5920 and the corresponding comment https://github.com/facebook/create-react-app/issues/1619#issuecomment-438755957.

Describe the solution you’d like

Vue solves it by allowing the user to intercept the config-chain and prepending sass content into every .scss file like that (Snipped from vue.config.js):

css: {
    loaderOptions: {
        sass: {
            // Global scss
            prependData: '@import "@/scss/_main.scss";'
        }
    }
},

... more config stuff

It’s now possible to use the prependData option for css-loader to allow this (I guess this wasn’t possible back then - but now it is). Though I’m not sure how to realize that via create-react-app-2 (I’m new to react)

Describe alternatives you’ve considered

The only alternative is to import your “global” .scss file every time.

[Arkellys]

Bumping this. Also now it’s additionalData that should be used instead of prependData.

[Arkellys]

You can also use react-app-rewired or its alternatives to edit the config and add prependData without ejecting.