nuxt: Sass Variables not available in pages / layouts / components

Environment

Nuxt project info: 22:39:51

Operating System: Linux
Node Version: v16.13.0
Nuxt Version: 3.0.0-27375427.d07d572
Package Manager: npm@8.3.1
Bundler: Vite
User Config: components, meta, css
Runtime Modules: -
Build Modules: -

Reproduction

I am trying to load sass from assets/sass/global.sass. Add the file and fill it with:

@forward "colors"
@use "colors" as c

body
  background-color: c.$secondary

Add a partical sass file _colors.sass and fill it with:

$primary: #264653
$secondary: #e76f51
$black: #171717
$white: #e7e7e7

Add the sass file into the nuxt.config.ts config.

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    components: true,
    meta: {
        script: [
            { src: "https://unpkg.com/phosphor-icons" }
        ],
    },
    css: [
        "@/assets/sass/global.sass",
    ]
})

See that the variable is valid and is applied as the background-color for the body. Now try to access any of the color variables inside a component, page or layout. Both with namespacing (@use) and without (@import) didn`t work for me.

Describe the bug

The Sass variables should be loaded into every vue file to be globally available. They aren`t as far as I can see.

Additional context

The Nuxt 3 docs are yet sparsely filled so there might be something missing I could not read up, that is necessary to make the variables load.

Logs

No response

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

We may implement via https://github.com/nuxt-community/style-resources-module or directly in Nuxt.

There is also the following workaround:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/global.scss";',
        },
      },
    },
  },
})

+12

danielroe on Apr 11, 2022

Using 3.0.0-rc.4 and this work around doesn’t seem to work anymore. Still getting ‘Undefined variable’ in components that use global scss variables. Any suggestions?

jdhillen on Jun 15, 2022

@jdhillen something like this may also work

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "your/path/to/variables.scss" as *;'
        }
      }
    },
  },

nicolaslima321 on Dec 13, 2022

@silverbackdan I figured this out using the latest Nuxt 3 release after a lot of trial and error 🙄 Make sure that you’ve installed the following dev dependencies:

npm i -D sass node-sass

Then just add:

css: [
  '~/assets/scss/global.scss'
]

OR you can also do it like this, but it’s much more verbose:

vite: {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import '~/assets/scss/global.scss';

        `
      }
    }
  },
},

It sees that the @ reference is not supported. I hope that helps as it took me a while to get it working myself 👍🏻

kylelogue on Jan 19, 2023