Vue3 在SetUp中使用变量名动态控制样式

### 在 Vue3 项目中使用并访问 LESS 变量 #### 配置 `vue.config.js` 文件支持全局 LESS 变量 为了使整个 Vue3 项目能够识别和应用 LESS 的全局变量，在项目的根目录下找到或创建名为 `vue.config.js` 的文件，并按照如下方式配置： ```javascript const path = require(&#39;path&#39;) module.exports = { pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [ path.resolve(__dirname, "./src/styles/index.less") // 定义全局样式路径 ], }, } } ``` 此设置确保所有组件都能共享指定位置下的 `.less` 文件内的样式定义[^1]。 #### 使用 LESS 变量于 `<style>` 块内 一旦完成了上述配置，便可以在任何单文件组件 (SFCs) 中通过 `<style lang="less">` 来利用已声明好的 LESS 变量。例如： ```html <template> <!-- 组件模板 --> </template> <script setup> // 脚本逻辑... </script> <style lang="less"> .breadcrumb { width: 100%; height: 50px; background: @all-background; /* 应用了来自 global less file 的颜色 */ display: flex; align-items: center; } </style> ``` 这段代码展示了如何在一个 SFC 中引入之前定义过的背景色作为样式的部分[^2]。 #### 在 JavaScript 中获取 LESS 变量值的方法 然而，直接从 JavaScript 获取编译后的 CSS 或者 LESS 变量并非易事，因为这些变量是在构建阶段被解析成最终的 CSS 输出。如果确实有需求要在运行时读取某个特定的颜色或其他属性，则可以通过以下几种方法实现间接访问： ##### 方法一：借助 inline style 和 data attribute 实现双向绑定 一种可行的方式是将需要动态调整的部分放在 HTML 属性上，比如 `data-theme-color="@primary"` ，再配合 JavaScript 进行处理。不过这种方法并不推荐用于复杂的场景。 ##### 方法二：维护一份独立的 JSON/JS 对象映射表 更常见的是保持一套与 LESS 文件同步更新的主题数据结构（如 JSON），该对象包含了所有的主题相关参数及其对应的十六进制颜色码或者其他单位表示法。这样既方便前端 JS 操作也利于后期维护。 ```json { "themeColors": { "primaryColor": "#4CAF50" } } ``` 然后在实际开发过程中手动保证两者的同步性即可。 ##### 方法三：利用 Webpack Loader 插件提取变量 对于那些追求极致自动化的工作流来说，还可以考虑编写自定义 Webpack loader 或插件来解析 LESS 文件并将其中的关键字转换为可由 JavaScript 导入的对象形式。这通常涉及到正则表达式匹配以及 AST 解析技术的应用，相对复杂度较高。 综上所述，虽然目前并没有内置机制允许直接从 JavaScript 访问 LESS 编译前的原始变量名，但是通过合理的架构设计和技术选型完全可以满足大多数应用场景的需求。