0

I'm using VSCode extension - Live Sass Compiler (Glenn Marks version). Everything works well besides global variables which return undefined when I include them in App component. This is my project structure:

enter image description here

_variables.scss

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

$font_logo: "Great Vibes", cursive;
$max_width: 750px;

_defaults.scss

* {
  box-sizing: border-box;
}

body {
  margin:0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing-: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

and index.scss which I import in App.js.

@import './variables';
@import './defaults';

App.js import

import "./styles/index.scss";

What is working?

Global styling like tags, classes etc. working well so they are loaded correctly

What is not working?

Defined variables in _variables.scss not working and give undefined error.

What I tried?

I installed Glenn Marks version because Ritwick Dey's is not supported anymore. I tried to change @import to @use and @use 'path' as. I tried changing order of imported files. I was looking for answer in several topics but didn't find an answer.

When I import @import './variables'; to a specific scss file it works but I want to include this file only once in index.scss. I don't want to write it in every scss file when I need variables.

Thanks for any help!

sparklemo7ion
  • 21
  • 6
  • I see you are importing you scss file inside a js file? Are you using a tool like Webpack or create-react-app? – Youssouf Oumar Jun 11 '22 at 15:27
  • @yousoumar it is build with create-react-app – sparklemo7ion Jun 11 '22 at 15:35
  • 1
    See this https://stackoverflow.com/questions/70232312/whats-the-best-way-to-add-add-sass-scss-in-a-react-app/70232542#70232542. – Youssouf Oumar Jun 11 '22 at 15:36
  • Since you are using create react app, you are doing it completely wrong to use VS Code extension, since you have better compilation tool for Sass, included in your development tool. The link I posted will let you know how you do that. – Youssouf Oumar Jun 11 '22 at 15:38
  • Check this out It might help – Sonam Gupta Jun 11 '22 at 16:14
  • @yousoumar thank you for answer! But it's still not working for me... I had sass already installed, I uninstalled all extensions for compiling/watching scss files, I changed imports to '@use '_variables.scss' and still undefined variables:/ – sparklemo7ion Jun 11 '22 at 16:16
  • It is not possible to import it on only one file, you must import/use it on all files that need it. – Arkellys Jun 11 '22 at 16:22
  • @yousoumar I think I've been using method you described and just didnt realise lol. So this extensions did nothing. – sparklemo7ion Jun 11 '22 at 16:36
  • @Arkellys That would make sense because if I import it to the specific scss file -variables works... But there is really no way to just import it in one global styles file and use variables in every file? Do I really need to include this one line in every scss file? – sparklemo7ion Jun 11 '22 at 16:39
  • There is a way, you can use the option [additionalData](https://webpack.js.org/loaders/sass-loader/#additionaldata) on `sass-loader` to prepend the import automatically on the files you want. But since you're using CRA, you will need an additional tool such as [react-app-rewired](https://github.com/timarney/react-app-rewired) to override the webpack config. Or you can also eject, but it's not recommended. – Arkellys Jun 12 '22 at 10:08

0 Answers0