在项目中全局引入scss的变量，以及如何在js中使用scss变量_@import "~@scss/variables.scss";

在项目中全局引入scss的变量

在项目中发现已经在main.js中全局引入了样式文件，但是对于scss中的变量还是不能在页面中直接使用，还需要再具体的页面中导入
下图在main.js中引入了scss的样式文件

直接使用的话报错

必须在具体页面中引入才能正常使用

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.test {
  color: $panGreen;
}
</style>
1
2
3
4
5
6

上面这种方式比较麻烦。可以通过在vue.config.js中配置后只需要在main.js中引入就可以全局使用了

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/init.scss";` // 具体要引入的路径
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10

在js中使用scss变量