CODEWITHSUNDEEP
vue.jssassconfiguration
Phendan
Phendan

Reputation: 133

Setting global sass variables in a vue project

I created a vue.config.js file to set some global sass variables (just like the documentation specifies), however when trying to access the variables in a component, I get an undefined error. Adding the same import statement manually in the component works, but somehow it's not being picked up from inside the vue.config.js file. I checked that I have node-sass and sass-loader installed and that the vue.config.js is in the project root (next to the package.json). What am I missing?

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

Folder structure

Upvotes: 5

Views: 19204

Answers (4)

Krzysztof Kaczyński
Krzysztof Kaczyński

Reputation: 5071

Change data to prependData

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

You can read more about this here: pre-loader docs

Upvotes: 6

macJames
macJames

Reputation: 111

this code is for vue3

install:

Sass

npm install -D sass-loader@^10 sass

fibers

npm install -D fibers

Style Resources Loader

npm i style-resources-loader -D

in your vue.config.js (root level project)

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/styles/scss/_variables.scss";
                `
            }
        }
    }
}enter image description here

symbol @ means that your file start from src folder

Upvotes: 6

Serhii Kucherenko
Serhii Kucherenko

Reputation: 89

  1. npm install --save-dev node-sass sass-loader
  2. Create file 'vue.config.js' in the root

  3. Add code below. Remember - @ refers to /src folder

    module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/assets/css/variables/_colors.scss";'
      }
    }
  }
}

  4. Restart the project

Upvotes: 3

mccallofthewild
mccallofthewild

Reputation: 520

It's hard to troubleshoot without the full context, so here are several options you can try:

  1. Ensure you've restarted the dev environment since changing the config (re-run yarn dev or npm run dev)

  2. Keep the template literal to one line, as is used in docs. This shouldn't make a difference, but it might. (e.g. data: `@import "@/assets/styles/_variables.scss";`)

  3. As you probably know, the underscore in front of a sass file denotes a sass partial. A partial is not used in the example, so it is possible that this has an effect as well. (e.g. rename _variables.scss to variables.scss and use data: `@import "@/assets/styles/variables.scss";`)

  4. Ensure that the sass-loader, node-sass, and css-loader packages are up to date.

  5. Try using the path without the slash after the @. e.g. @assets/styles/_variables.scss.

  6. Try with a ~ instead of the @. e.g. ~assets/styles/_variables.scss. If nothing else has worked, try replacing the @ with src as well.

Good luck!

Upvotes: 1

Related Questions