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

Question

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

我尝试了以下操作：
从我的 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"
    }]
  }]
}

然后假设您有一个包含 SASS 变量的文件，style.sass其名称如下所示

$btn-color: #D75893

:export
    buttonColor: $btn-color

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

$btn-color: #D75893

:export
    buttonColor: $btn-color

并像这样访问你的变量

import styleInfo from 'style.sass';

注意：在编译变量时，不可能在运行时动态更改 SASS 变量。

资料来源： 这篇文章来自 HashRocket和这篇文章来自 itnext