How to prepend scss files in Vue3 + dart-sass?

Question

I am trying to prepend scss files to my project. Here is my vue.config.js:

const {defineConfig} = require('@vue/cli-service');
module.exports = defineConfig({
    transpileDependencies: true,
    css: {
        loaderOptions: {
            scss: {
                sassOptions: {
                    content: "~@/assets/styles/base/_colors.scss;"
                }
            }
        }
    }
});

But scss is not loaded (look at the screenshot). I am using Vue3, [email protected], [email protected]

P.S. with node-sass it worker fine

Answer 1

My vue.config.js :

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "./src/style/global.scss";`,
      },
    },
  },
};

Works fine for me

Answer 2

If it's any help i did this with node-sass in my webpack config:

  {
    test: /\.scss$/,
    use: [
      env.production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
      {
        loader: 'css-loader',
        options: {
          url: false,
        }
      },
      {
        loader: 'sass-loader',
        options: {
          additionalData:`
          @import "css/base/colors.scss";
          @import "css/settings.scss";
          @import "css/font-definitions";
          `
        },
      },
    ],
  },

With that I can use any of the variables defined from the files in additionalData in vue files.

Answer 3

Hello I'm using the next code, this appears in the documentation of VUE CLI GotoDocumentationVueCLI

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // by default the `sass` option will apply to both syntaxes
      // because `scss` syntax is also processed by sass-loader underlyingly
      // but when configuring the `prependData` option
      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
      // in that case, we can target the `scss` syntax separately using the `scss` option
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // pass Less.js Options to less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}