Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:19
  • Comments:9

github_iconTop GitHub Comments

Arkellyscommented, Mar 16, 2021

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

Arkellyscommented, Nov 3, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Accessing global variables in Sass with Webpack without ...
[Solved]-Accessing global variables in Sass with Webpack without multiple imports- ... my custom variables and the mixins, variables etc. from bootstrap:
Read more >
Variables - Sass
A variable declaration looks a lot like a property declaration: it's written <variable>: ... Variables declared at the top level of a stylesheet...
Read more >
sass with create react app - css - Stack Overflow
To share variables and mixins I always use a global scss file, which will be required in the app (e.g. in the app.js)....
Read more >
typed-scss-modules - npm
If an option is not passed, it will first check if node-sass is installed. If it is, it will be used. Otherwise, it...
Read more >
Sass Learning Series Part 2: Everything About SASS Variables
In short, it is just like the variables that we use in any programming language. Sass Variable Declaration. Scoping Rules. All the variables...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found