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);
相关推荐
一枚前端小能手1 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码1 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA98 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登8 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多9 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus11 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom13 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
echoarts17 分钟前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Mintopia18 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_9284115620 分钟前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6