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"
    }]
  }]
}

然后假设您有一个包含 SASS 变量的文件，名为

style.sass

，看起来像这样

$btn-color: #D75893

:export
    buttonColor: $btn-color

在您的

<script>

标签中，您可以像这样导入 SASS 变量文件

import styleInfo from 'style.sass';

并像这样访问你的变量

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

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

来源：

这篇文章来自 HashRocket 和 这篇文章来自 itnext

Answer 2

在您的组件中，使用 Vue-loader 而不是通常的导入语法编写导入：

import variables from '@/assets/scss/main.scss?vue&type=style&index=0&lang=scss&module=1'

此代码包括：scss 文件路径 + 查询，专门要求 Vue-loader 加载 CSS。查询在

?

之后开始。

您还可以将 css 变量从同一组件的

<style>

标签导入到

<script>

。为此，请将 scss 文件路径更改为组件的路径：import variables from '@/MyComponentName.vue?vue&type=style&index=0&lang=scss&module=1'

来源：

如何在 VueJS 中与 JavaScript 代码共享 SASS 变量