Vue3 组件中使用 SCSS 变量

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

一、使用 sass-extract

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

1. 安装 sass-extract

bash 复制代码
npm install sass-extract --save-dev

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

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

javascript 复制代码
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 文件

javascript 复制代码
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

css 复制代码
$color--active: #4f7eff;



:export {

  color--active: $color--active;

}

2. 使用

javascript 复制代码
import themeScss from "@/assets/scss/theme.module.scss";



console.log(themeScss);
相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio3 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一3 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
lingchen19066 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152876 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript