I am trying to break my scss partials into multiple files and aggregate it into one file and access variables accordingly. I have this folder structure:
create-react-app/src
│
└───Styles
│ │
│ └───Tokens
│ | │ _Colors.scss
│ | │ _Tokens.scss
│ | _Base.scss
Inside _Colors.scss
, I have a simple variable: $primary-color: red;
.
// _Colors.scss
$primary-color: red;
Inside _Tokens.scss
I use the @use
rule to import my partial and give it an alias: @use "./Colors.scss" as colors;
.
// _Tokens.scss
@use "./Colors" as colors;
In my _Base.scss
I am importing my Tokens.scss
and giving that an alias as well: @use "Styles/Tokens/Tokens" as tokens;
. I then try to access the nested alias/namespace, eg:
// _Base.scss
@use "Styles/Tokens/Tokens" as tokens;
body {
color: tokens.colors.$primary-color; // Linter has an issue with .colors
}
I am confronted with a linter error: identifier or variable expectedscss(css-idorvarexpected).
React also spits out an error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "(".
╷
10 │ color: tokens.colors.$primary-color;
│ ^
Confused on what to do at this point, I've tried for a few hours poking around Google but can't find anything. Help would be appreciated, thank you! Let me know if you need any more information.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/TV4c29I
Comments
Post a Comment