Nuxt.js: Global SASS loading not working

[inssitu]

I tried to follow the guide from https://nuxtjs.org/api/configuration-css/

  // file: nuxt.config.js 
  css: [
    { src: '~assets/style/vars.sass', lang: 'sass' },
  ]

But I'm getting Undefined variable... or No mixing named... over and over again

_{This question is available on Nuxt.js community (#c697)}

[piyushchauhan2011]

@inssitu Hmm, it should work automatically! Did you installed yarn add node-sass sass-loader or npm install --save-dev node-sass sass-loader ?

Here is the working example: https://github.com/piyushchauhan2011/nuxt-component

[inssitu]

I have tried your link but is not working either. You can check this demo:
https://github.com/inssitu/nuxt-demo.git

The style is working but the vars and mixing are not injected

[piyushchauhan2011]

The above repo has $color-dark defined in vars.sass file (https://github.com/inssitu/nuxt-demo/search?utf8=%E2%9C%93&q=%24color&type=) reference

I don't think the components sass will be able to find the reference to that variable. You should technically use variable in your sass files and in component probably good idea to stick to scoped css/scss/sass in general.

Also, I haven't tried importing the variable sass file. Not sure how that will work!! @inssitu

[c4milo]

I'm running into this issue as well. Can it be re-opened please?

[dkushner]

I am also running into this issue, having followed the instructions in the documentation to the letter. I am simply attempting to include the Bulma SASS globally and have added the required block to the CSS section of the configuration. I have also installed node-sass and sass-loader. I still get an unexpected character @ error as if it is attempting to use the CSS loader.

[rlam3]

@dkushner @c4milo @piyushchauhan2011 did you guys find a workaround or a solution?

[upstroke]

It seems when using the css config option inside the nuxt.config.js the given css file will be a plain include inside the html header section. Therefor I am including my normalize css via the nuxt.config.js css option and all other global SASS files such as functions, mixins and variables are included via a normal import statement inside the module scoped style property.

For right now I am experimenting with importing my global css (grids) to a nuxt layout as I want to use postCSS:

Folder: layouts
- default.vue

<style lang="scss">
  @import '~assets/sass/globals.scss';
</style>

This seems all to work but is way to complicated and needs to be addressed in the documentation. At least we should have a best practice example from the nuxtjs core team.

[stavros-liaskos]

I have the same problem with my project.
In pretty much every component, I am importing the global styles as @import '../assets/styles.scss';.
If you remove an import, from i.e. SocialLinks.vue, the application breaks.
I couldn't fix that yet. Open to suggestions.

[tenosh]

Any solution to this issue? Why is it closed when global sass files can't be defined on CSS property in nuxt config file?

[aldarund]

@tenosh what do u mean by global sass? If u need to inject vars into every sass file u could use https://nuxtjs.org/api/configuration-build#styleresources

[tenosh]

@tenosh what do u mean by global sass? If u need to inject vars into every sass file u could use https://nuxtjs.org/api/configuration-build#styleresources

@aldarund Oh my. I was looking exactly for this and it works. I mean global sass by having my global .scss resources without the need to import it in every component. I suppose I've missed the solution in the comments or why nobody talked about styleresources property here? anyways... Do you know why they did this into configuration build property instead of using css property?

[aldarund]

@tenosh because its different. styleResources using https://github.com/yenshih/style-resources-loader
It will inject it into every scss file. While global css just a global css ( or sccs or whatever)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.