Global Sass Import & Usage - Nuxt 3 Static Assets

Question

I am trying to import a global Sass stylesheet from the /assets directory and use stuff like variables and mixins defined there throughout the components. My nuxt.config.ts looks like this currently:

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    styleResources: {
        sass: ["@/assets/styles/main.sass"],
    },
    build: {
        extractCSS: true,
        styleResources: {
            sass: "@/assets/styles/main.sass",
            hoistUseStatements: true,
        },
    },
    // buildModules: ["@nuxtjs/style-resources"], // This throws error
    vite: {
        css: {
            loaderOptions: {
                sass: {
                    additionalData: ` @import "@/assets/styles/main.sass"; `,
                },
            },
        },
    },
});

When I try to use a variable now, I get [plugin:vite:css] Undefined variable. error. This used to work very well in Nuxt 2 with @nuxtjs/style-resources but I'm not sure how to make this work in Nuxt 3.

However, classes and applied styles from that stylesheet are working, only varibles, mixins and maps are not accessible.

Can someone please help?

Sillimanite

As per the Docs, Nuxt loads preprocessor automatically. you might need to add the preprocessor. – Reinaldoreinaldos

I have sass and sass-loader installed in package.json and I'm using <style lang="sass"> tag as well in the components. Still not working for some reason. – Sillimanite

codesandbox.io/s/confident-saha-w4cpj – Sillimanite

I'm not sure if I was able to set this up correctly, but let's try this. I think this is pretty the structure I've been working on. – Sillimanite

In app.vue, we can try setting the div background to $test variable defined in the main.sass – Sillimanite

Answer 1

Okay, so this solution worked, after playing around for a while.

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    vite: {
        css: {
            preprocessorOptions: {
                sass: {
                    additionalData: '@import "@/assets/styles/_variables.sass"',
                },
            },
        },
    },
});

Here,

• main.sass contains the classes and styles.
• _variables.sass contains the mixins, variables, maps, etc.

Note that in _variables.sass, you need to have an empty line at the beginning of the file to avoid error. It's a problem we're facing at the moment, hopefully will be solved soon.

Sillimanite

This worked for me, but the problem is that I've just one Sass entry file (index.scss) wich is importing all the stuf (settings, utilities...) and it is not possible to add it in "css" and "additionalData" imports at the same time. I solved it adding an empty file called index.scss, importing it like so (css: ["@/assets/styles/index.scss"]), renaiming the file with all the imports to scssImports.scss and importing it like this (additionalData: '@import "@/assets/styles/scssImports.scss";'). There is any way to directly add the imports in the index.scss and get rid of the scssImports.scss? – Carper

Answer 2

I'm using Nuxt 3 with TS setup and today is February 16, 2023 in the US. After trying many different variations, it would not work for me without the semi-colon at end of _variables.scss although I do agree with Juan, that first line of import { defineNuxtConfig } from nuxt3 is not needed.

    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { lang: "en" },
    },
  },
  css: ["@/assets/styles/main.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/styles/_variables.scss";',
        },
      },
    },
  },
});

Image of my IDE and terminal messages

Choreodrama

The only difference between my answer and @Sillimanite 's answer is the semi-colon at the end of additionalData: '@import "@/assets/styles/_variables.scss";', – Choreodrama

You can edit your answer, and It won't work without semicolon? – Burned

Compare your answer to the second answer written by Juan. He has semicolon too. – Burned

Thanks for bringing that to my attention @Mises. I missed that. – Choreodrama

Answer 3

It's not necessary import defineNuxtConfig

This works for me:

// nuxt.config.ts
export default {
  css: ['@/static/assets/scss/base.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/style/global.sass";'
        }
      }
    }
  }
};

Stagnant