VueJS 和 SASS - 在脚本中导入和使用 SASS 变量

Posted 2023-02-22

【中文标题】VueJS 和 SASS - 在脚本中导入和使用 SASS 变量

【英文标题】：VueJS and SASS - Import and use SASS variables in script

【发布时间】：2021-06-30 04:15:48

【问题描述】：

我目前正在开发一个集成了 SASS 的 VueJS 项目，我想访问组件脚本部分中的 SASS 变量以进行动态样式计算。我看到了纯 JS 的示例，我正在尝试将其转换为 VueJS 组件。 到目前为止，我已经能够在Vue文件的style部分集成SASS变量，但是我无法将变量导入到组件的脚本中。

我尝试了以下方法： 从我的 scss 文件中导出变量：

:export 
    primaryColor: $primary;

然后在我的组件中导入文件：

import variables from '@/assets/scss/main.scss'

然后像这样访问它：variables.primaryColor

但我无法让它工作，variables 始终是一个空对象，里面没有任何值。我正在使用 Nuxt 并安装了包 node-sass 和 sass-loader。任何帮助将不胜感激！

【参考方案1】：

如果您只想访问 SASS 文件中的变量，可以将其添加到 configureWebpack 中的 vue.config.js 文件中：

module:
  rules: [
    test: /\.scss$/,
    use: [
      loader: "style-loader"
    , 
      loader: "css-loader" 
    , 
      loader: "sass-loader"
    ]
  ]

然后假设您有一个包含名为 style.sass 的 SASS 变量的文件，看起来像这样

$btn-color: #D75893

:export
    buttonColor: $btn-color

在您的<script> 标签中，您可以像这样导入您的 SASS 变量文件

import styleInfo from 'style.sass';

并像这样访问您的变量

console.log("The button color is", styleInfo.buttonColor);

注意：是not possible在编译变量时在运行时动态改变SASS变量。

来源： This article from HashRocket 和 This article from itnext

【讨论】：

非常感谢您的回答！我正在使用 Nuxt，所以它增加了一点复杂性，但我希望你的回答给了我足够的信息。 ?