vue.jssassvuepress

Import Global SASS variables into VUEPRESS components

In Vuepress, is there a way to globally import a .sass file with my variables so I don't need to importing it everytime I use a variable?

Maybe something like we do in VUE:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/sass/_variables.sass";
          @import "@/sass/_mixins.sass";
        `
      }
    }
  }
};
Solution

  • As @michal-levý pointed about using alias, I just figured out that I can use vuepress builtin alias @theme. So my config.js is like.

    module.exports = {
  sass: {
    data: '@import "@theme/styles/_variables"'
  }
}

    Worked Fine!

    I'm using .sass sintax and sass-loader - 7.3.1 due another bug, so that's why I used data instead of prependData.