vue3笔记（9）scss配置

有个需求是网页的整体配色需要和公司官网一致，在这里我使用scss写样式代码，需要全局引入颜色样式，以便在各个组件中使用。
这篇记录scss样式引入及使用。

项目配置

使用vue-cli创建项目时，可以选择使用scss，相关的配置会自动加入package.json，检查是否含有以下两项：

"devDependencies": {
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
},

引用

在本项目中，assets/scss/_variables.scss文件中编写颜色样式。

$text-yellow: yellow;

方法一：单组件引入
可用的写法：

<style lang="scss" scoped>
@import "../../assets/scss/_variables.scss";
span {
  color: $text-yellow;
}
</style>

如果报错”Undefined variable. root stylesheet”，说明文件没有引入成功；
如果报错”Can’t find stylesheet to import. root stylesheet”，说明引入的文件路径有问题；
不知道为什么下面这个写法会报错，显示无法找到文件。

方法二：整体引入
如果在每个组件中引入一次，稍微有点麻烦。按照我这里的设计，最好是整体引入，每个组件中都能使用。查阅一些资料后，发现可以在vue.config.js中这样写：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/_variables.scss";`,
      },
    },
  },
});

重启项目，更改成功！