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

Question

我目前正在开发一个集成了 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。任何帮助将不胜感激！

Answer 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