SCSS vars

[JiDai]

Hi,

I just updated to 9.3 and I am testing.
I want to share variables between global styles and components. I don't which is the right way and how the CSS will be generated.

Here is the structure

├── components
│   └── Button.scss
├── styles
│   ├── _variables.scss
│   └── index.scss

And here is the file contents

// index.scss
@import "variables.scss";

// _variables.scss
$color: blue;

// Button.scss
@import ../styles/variables.scss

Button {
  color: $color
}

And I get the following error :

SassError: File to import not found or unreadable: ../styles/variables.

Thanks for help

[Timer]

Can you try the following instead:

// components/Button.scss
@import "../styles/_variables.scss";

Button {
  color: $color
}

Note the quotes around the import.

Also, your example imported variables and not _variables, but I assume this was a typo in your demo.

[JiDai]

Ok it was a mistake, the path was wrong, sorry. Thanks for help!

[ivoilic]

@Timer Jumping in on this thread with a related issue. Previously it was possible to include paths for sass like this:

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  cssModules: true,
  sassLoaderOptions: {
    includePaths: ['./src/styles']
  }
});

How can that be done now with 9.3.0?

[Timer]

Please keep discussions relevant to the original question. If you have a new question, please open a separate discussion.

[timneutkens]

Landed support earlier today for sassOptions: #11063