React javascript to typescript SCSS variable used before decleration issue

Question

I'm working on a javascript react project that's being ported to typescript. Everything seems to be going fine, apart from the scss.

We use variables in our scss files, and the files work in javascript. However now that the app is migrating to react I'm getting this error message:

    ERROR in ./src/ourApp/scss/config/interactive/_variables.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/ourApp/scss/config/interactive/_variables.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
20 │ $vertical-menu-border: $white;
   │                        ^^^^^^
   ╵
  src\ourApp\scss\config\interactive\_variables.scss 20:24  root stylesheet

the root cause of the issue seems to be that $white is being used before it's being declared and the issue goes away when I move the $white declaration above the $vertical-menu-border declaration. I'd go about re-ordering each and every scss variable to solve this but I'm unsure weather it's the correct thing to do given that there are several files to fix like this.

Why is this an issure in React.Typescript but not in React.Javascript?

Any advice? Could I potentially disable this scss error checker and if so how?

Messing around in the Sass playground it appears that it is required to define your variable before you use it. I suspect you're just going to have to fix this in your files. — Alexander Nied
– Alexander Nied, Commented Nov 15, 2022 at 14:15

Tom_Ra · Accepted Answer · 2022-11-19 17:44:51Z

1

What you said is correct, the variable is still not defined at the point.

in React, you'd usually import an App.scss in the root component (index.tsx usually).

in the App.scss you can import all the rest of your scss files. if you import the variable.scss before all the rest, it will then be availible in the other files. an example App.scss would be:

App.scss file (assets folder is just an example)

@import "../assets/_variables" (where color is declared)
@import "../assets/other-file" (where color is used)

root file:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./App.scss";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);


reportWebVitals();

answered Nov 19, 2022 at 17:44

Tom_Ra

1331 silver badge11 bronze badges

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

1 Comment

Feyton Over a year ago

This is the correct answer, I was importing the wrong file. If I just import a singular scss that imports variables into itself the compiler doesn't complain about bad variable ordering.

Collectives™ on Stack Overflow

React javascript to typescript SCSS variable used before decleration issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related