Vue3 组件中使用 SCSS 变量

在 JavaScript 中不能直接使用 SCSS 变量。但是可以通过一些间接的方法来实现类似的效果。

一、使用 sass-extract

使用 sass-extract 库来提取 SCSS 变量并生成 JSON 文件，然后在 JavaScript 中读取这个 JSON 文件来获取变量值。

1. 安装 sass-extract

npm install sass-extract --save-dev

2. 在项目的根目录创建一个 extract-vars.js 文件

这个脚本会读取`./src/styles/main.scss`文件中的 SCSS 变量，并将它们输出到`./src/variables.json`文件中。

const sassExtract = require("sass-extract");

const extractor = sassExtract();



extractor.loadFile("./src/styles/main.scss");

const variables = extractor.vars();

const fs = require("fs");



fs.writeFileSync("./src/variables.json", JSON.stringify(variables, null, 2));

3. 在你的 JavaScript 文件中引入生成的 JSON 文件

const variables = require("./variables.json");



console.log(variables["$primary-color"]); // 假设在 SCSS 中有一个 $primary-color 变量

这种方法需要在构建过程中运行`extract-vars.js`脚本，以确保变量 JSON 文件是最新的。

二、使用 xxx.module.scss

定义 xxx.module.scss 文件, 使用 :export { // ... } 导出 scss 变量给 Vue3

1. 定义 theme.module.scss

$color--active: #4f7eff;



:export {

  color--active: $color--active;

}

2. 使用

import themeScss from "@/assets/scss/theme.module.scss";



console.log(themeScss);