Vue 3.0 scss 全局变量

1.安装 scss

	npm install sass-loader --save-dev
	npm install node-sass --sava-dev

2.新建一个 ‘index.scss’：

$color: red;

3.在‘vue.config.js’中，加入代码：(需要重新运行项目)

  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "./src/assets/index.scss";`
      }
    }
  }

也可以在vue中加入：（两种只能选一种，不然会报错）

<style lang="scss" scoped>
@import "@/assets/index.scss";
</style>

4.在vue文件中使用：

<style lang="scss" scoped>
.hello {
  background: $color;
}
</style>

结束

如果想在script中获取，需要以‘.module.scss’文件格式命名，即‘index.module.scss’:

:export {
  theme: $color;
}

在vue中使用：

import colors from "@/assets/index.module.scss";