variable undefined in sass

user_4854993 0
Viewed 1164

Everything was working fine and then all of the sudden a bunch of error appeared on the terminal, saying that I needed to install node-sass module. So that's what I did to fix all those errors, but now I get this error:

SassError: Undefined variable: "$text-weight".

I don't get why react is even detecting my sass files, I'm only importing the compiled vanilla css and sass is also compiled successfully with no errors. _variables.scss is imported at the top using @import syntax.

index.scss file:

@import './variables';

body {
  margin: 0;
}

:root {
  font-family: acumin-pro, sans-serif;
  font-style: normal;
  box-sizing: border-box;
}

.App {
  display: grid;
  grid-template-columns: 0.1fr 10fr 0.1fr;
  min-height: 100vh;
}

@import './navbar';
@import './carousel';
@import './user';
node-sass reactjs sass
2 Answers

If you have defined your $text-weight variable in another file you should import it to the file that you are using it

user_110216090

You will have to use @import syntax to import the file where you define your variable $text-weight.

If you are importing .scss file or .sass file somewhere in your React app, it will require you to setup node-sass to compile sass syntax into vanilla css.

Normally, people will do that in index.js or App.js where the main react component resides.

Not only React, most of the framework such as Angular will also need to setup in the boilerplate for scss or sass support.

user_130686350
Related