vue.jssassprependdart-sass

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

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, sass@1.32.7, sass-loader@12.0.0 enter image description here enter image description here

P.S. with node-sass it worker fine

Solution

  • My vue.config.js :

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

    Works fine for me