Question 292597 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Automatically import SCSS file for every Vue component

I trying do import globally an variables.scss file

my vue.config.js like the following:

module.exports = {
        css: {
            loaderOptions: {
                scss: {
                    additionalData: `@import "@/styles/variables.scss";`
                },
            }
        }
}

variables.scss

$dark-bg: #1C2537;

and vue file where i try use it

<script setup>
// Component logic
</script>

<template>
    <!-- Template -->
</template>

<style lang="scss">
@import "@/styles/variables.scss"; // if i add this all works
.left-menu {
  background-color: $dark-bg;
}
</style>

when i directly import variables.scss in vue file all work good but global import not works

if any idea what problem is?

i use: "sass": "^1.69.5", "sass-loader": "7.3.1", "vue": "^3.2.26",

i expect my variables from variables.scss works globally in all vue files

Tags:

2

Answers


  1. 0

    You can add the file path to your scss file in your vue.config.js file. Here is an example:

    module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "@/assets/scss/variables/variables.scss" as *;`
      },
    },
  },
};
    Login or Signup to reply.
  2. 0

    I’ve quite similar configuration but the only thing that differs from yours is the scss property which is sass in mine.

        loaderOptions: {
      sass: {
        additionalData: `
          @use "sass:math";
          @import "@/css/_colors.scss";
          @import "@/css/_animations.scss";
          @import "@/css/_mixins.scss";
        `
      }
    }

    In my .vue file I can do then the following with no errors :

    <style lang="scss">
  .message {
    color: $error-color;
  }
</style>

    Since, according to documentation, sass options also applies to scss options, maybe you could give it a try ?

    Important note in documentation : this option is named as prependData in sass-loader v8

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search