ReactJS - Unable to import scss globally across components

Question

I am using create-react-app (without ejection) for one of my application, and have the following folder structure:

/src
    assets
        scss
            abstract
                _variables.scss
                _mixins.scss
        _global.scss
    components
        Welcome
            Welcome.js
            Welcome.scss
    App.js    
    App.scss

The contents of the files are below:

_variables.scss

$color-info: #f45a40;

global.scss

@import "./abstract/variables";
@import "./abstract/mixins";

App.scss

@import "assets/scss/global";

App.js

import React from "react";
import "./App.scss"
import Welcome from "./components/Welcome"


const App = () => {
  return (
    <Welcome />
  );
};

export default App;

Welcome.js

import React from "react";
import "./Welcome.scss"

const Welcome = () => {
  return (
    <div class="text-color">Some test here</div>
  );
};

export default Welcome;

Welcome.scss

.text-color {
    color: $color-info;
}

Since i am already including the "global.scss" in "App.scss", should it not automatically make all partials available for components like "Welcome.js"? Unfortunately its not, its throwing me the following error in "Welcome.scss" file:

SassError: Undefined variable: "$color-info".

But, if I include 'global.scss' in the "Welcome.scss" file, then it works fine. I do not want to include global.scss in each and every component, is there a way to make this work?

Danila · Accepted Answer · 2020-08-31 13:57:56Z

1

If you are using Webpack then you have multiple ways to achive that, for example:

Sass-loader additionalData option. You set some string and it will be prepended before actual file contents. https://webpack.js.org/loaders/sass-loader/#additionaldata
Sass-resources-loader, mostly will do the same, but have more options to configure. https://github.com/shakacode/sass-resources-loader

answered Aug 31, 2020 at 13:57

Danila

19k2 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phantom007 Over a year ago

No, I am using create-react-app without ejection. Please help me achieve my goal.

Danila Over a year ago

I am not sure that this is possible without eject in CRA. You probably would need to import variables manually in each file. If there is a way to do it automatically I would like to know too.

Phantom007 Over a year ago

The problem here is if i include the partials i.e "variables.scss" or "mixins.scss" manually in each and every component, then there will be multiple instances of css classes when i inspect in chrome dev tools. Isnt that redundant css data?

pl2ern4 Over a year ago

you can try with "react-app-rewired"

Piotr Pieprzyk · Accepted Answer · 2020-08-31 13:55:46Z

0

I understand that you wanted to create a theme imported to the parent React component.

Unfortunately, Sass does not provide this possibility. You have to import variables into a sass file every time.

But I can tell you that the Styled-components library provides a possibility for React.js

If you want to learn about creating a theme in Styled-components please check: https://styled-components.com/docs/advanced#theming.

answered Aug 31, 2020 at 13:55

Piotr Pieprzyk

511 silver badge5 bronze badges

1 Comment

Phantom007 Over a year ago

Is this a sass issue or React? Because if i compile globall.scss to global.css and include it in the public/index.html file as a normal css link tag then it works.

Collectives™ on Stack Overflow

ReactJS - Unable to import scss globally across components

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related