How do you use this with global classes

[adamjw3]

I have global.scss and want to use that across the whole site.

in global i have a class .myclassname

How can i use this across the whole site?

Thanks

have my config as below

const withStyles = require('@webdeb/next-styles')

module.exports = withStyles({
  sass: true, // use .scss files
  modules: true, // style.(m|module).css & style.(m|module).scss for module files
  sassLoaderOptions: {
    sassOptions: {
      includePaths: ["src/styles/globals.scss"], // @import 'variables'; # loads (src/styles/varialbes.scss), you got it..
    },
  }
})

module.exports = {
  future: { webpack5: true }
}

[webdeb]

You don't have to put it inside inlcudePaths in the config. this setting is to make the path available in your other css/scss files. For example to make scss variables available in other files.

Instead just import your global.scss in your js entry file (mostly _app.js) and the classes should be available everywhere.

import "styles/globals.scss"

[adamjw3]

That works for classes but if i have global variables i get undefined when using the variable in a component scss file

[webdeb]

scss files are getting compiled to css, so if you use scss variables you should put them in a separate file "variables.scss" then you can import that file and use variables in other scss files.

[adamjw3]

Anyway of not having to import variables and mixins all the time and have them at a global level but exposed to the component scss file

[webdeb]

Well if you put only mixins and variables into globals.scss and define includePaths: ["src/styles/globals.scss"] in the config.

you still have to import in your module files but only as

@import "globals"

.component {
  color: $color;
}

AFAIK there is no such global sass built-in into sass itself, but a quick search brought me to this. https://github.com/shakacode/sass-resources-loader

I hope I could help you. Closing this now