Vue3 组件中使用 SCSS 变量
在 JavaScript 中不能直接使用 SCSS 变量。但是可以通过一些间接的方法来实现类似的效果。
一、使用 sass-extract
使用 sass-extract 库来提取 SCSS 变量并生成 JSON 文件，然后在 JavaScript 中读取这个 JSON 文件来获取变量值。
1. 安装 sass-extract
npm install sass-extract --save-dev2. 在项目的根目录创建一个 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);