CODEWITHSUNDEEP
reactjssass
Jammar
Jammar

Reputation: 446

Sass and react, importing variables with @use to modules

Heya so I realised the Sass team discourages use of @import (https://sass-lang.com/documentation/at-rules/import) so I've tried to use @use.

I'm very new to using Sass in React (discouraged from using Styled-components which I'm more familiar with). When trying to import a variable to my InputBar.module.scss I get this error:

Failed to compile
./src/stylesheets/modules/InputBar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-6-4!./src/stylesheets/modules/InputBar.module.scss)
SassError: Invalid CSS after "...nt-family: vars": expected expression (e.g. 1px, bold), was ".$contentfont;"
        on line 7 of /Users/Jamming/_projekt/_kod/timeatask/client/src/stylesheets/modules/InputBar.module.scss
>>   font-family: vars.$contentfont;

   -------------------^

So yeah, not sure what to do, I've tried everything. Pretty sure I've set up everything wrong or my way of working with Scss + React is completely off. Have a look at my code:

stylesheets/modules/_vars.scss

$primaryBG: #f0f7ff;

$h1font: 'Montserrat Subrayada';
$contentfont: Montserrat, sans-serif;

stylesheets/modules/InputBar.module.scss

@use 'vars';

.container {
  [...]
  font-family: vars.$contentfont;
}

Components/InputBar.js

import styles from '../stylesheets/modules/InputBar.module.scss'
[...]
<form className={styles.container}

which works fine when I remove this from InputBar.module.scss

font-family: vars.$contentfont;

I also have a stylesheets/main.scss which

@import './modules/vars.scss';

So. where am I completely lost? please enlighten me :-)

edit: project is bootstrapped with create-react-app edit: + node-sass

Upvotes: 0

Views: 940

Answers (1)

Jammar
Jammar

Reputation: 446

Might've found an answer to my problem. @use keyword isn't supported in node-sass yet.

https://github.com/sass/node-sass/issues/2886

I think I will have to stick with @import.

Upvotes: 1

Related Questions