How to use import global sass variables with create-react-app (ejected)

Question

Please see this repo for further information and reproduction.

I am using an ejected create-react-app and I want to be able to use global sass variables in an individual stylesheet without having to import the stylesheet. I think using sass-resources-loader is what I should use (although if there is a better way of doing this, please let me know). I have updated the create-react-app ejected webpack config here, but whenever I run yarn start, I still get the complaint:

SassError: Undefined variable: "$boxSize". on line 5 of src/SampleComponent/sampleComponent.scss , height: $boxSize;

Is there something that I am doing wrong in trying to use sass-resources-loader or should I be using something different instead? Thanks, and here are some file snippets below for more context:

file structure:

src/
  - SampleComponent/
    - SampleComponent.js
    - SampleComponent.scss
  - styles/
    - sizes.scss
  - index.js

SampleComponent.js:

import * as styles from './sampleComponent.scss';

const SampleComponent = () => (
  <div className={styles.div}>
    <h3>hello world</h3>
  </div>
);

export default SampleComponent;

sampleComponent.scss:

.div {
  align-items: center;
  background: pink;
  display: flex;
  height: $boxSize;
  justify-content: center;
  margin: 5rem;
  width: $boxSize;
}

sizes.scss:

$boxSize: 30rem;

Grzegorz T. · Accepted Answer · 2021-03-02 21:33:07Z

1

Use the sass-loader library, I use it that way and it works very well.

{
  loader: 'sass-loader',
  options: {
    sourceMap: true,
    additionalData: `
        @import "sources/scss/modules/_config.scss";
        @import "sources/scss/modules/_global.scss";
      `
  },
},

answered Mar 2, 2021 at 21:33

Grzegorz T.

4,2182 gold badges14 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

How to use import global sass variables with create-react-app (ejected)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related