Nuxt Bulma 应用程序无法访问 SCSS 变量

Posted 2023-02-22

【中文标题】Nuxt Bulma 应用程序无法访问 SCSS 变量

【英文标题】：Nuxt Bulma app can't access SCSS variables

【发布时间】：2019-07-17 14:29:35

【问题描述】：

我创建了一个包含 Bulma 的 Nuxt 应用程序，并希望访问/覆盖我的 .vue 文件中的 Bulma 变量。我遵循了here 的说明，这些说明似乎与我在其他几个位置找到的内容相匹配，但在尝试访问我的.vue 文件中的$primary 变量时仍然出现错误。

这是我的assets/css/main.scss 文件：

@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma";

我的nuxt.config.js 模块部分：

modules: [
    ['nuxt-sass-resources-loader', './assets/css/main.scss']
],

还有我的.vue 文件：

<template>
    <section class="container">
        <div class="my-title">
            About
        </div>
    </section>
</template>

<script>
export default 
;
</script>

<style lang="scss">
.my-title 
    color: $primary;

</style>

这是终端中的错误消息：

Module build failed (from ./node_modules/sass-loader/lib/loader.js):                                                                                                                                                                                                                       friendly-errors 11:51:52

    color: $primary;
          ^
      Undefined variable: "$primary".
      in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
                                                                                                                                                                                                                                                                                           friendly-errors 11:51:52
 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
 @ ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
 @ ./pages/about/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

谁能看出我做错了什么？

更新：我通过直接在.vue 文件中导入.scss 将其缩小到nuxt.config.js 模块设置。这告诉我main.scss 文件中的导入工作正常。

【问题讨论】：

你在 main.scss 中定义了 $primary 吗？

@Andrew1325 $primary 是 Bulma 定义的变量之一，所以我不需要定义它。实际上我也尝试过定义它，没有任何变化。

【参考方案1】：

好的，我无法让它与 nuxt-sass-resources-loader 一起使用，但我确实从这里https://github.com/nuxt-community/style-resources-module 让它与 style-resources-module 一起使用。安装 style-resources-module 后，我只需将其添加到我的 nuxt.config.js 模块部分并添加适当的 styleResources 部分，如下所示：

modules: [
    '@nuxtjs/style-resources'
],

styleResources: 
    scss: [
        './assets/css/main.scss'
    ]
,

【讨论】：

这里只导入bulma的_initial-variables.scss里面声明的公共变量，那每个组件里面定义的变量呢？

【参考方案2】：

此配置选项提供在通过 webpack 加载其他文件之前加载您指定的任何 scss/sass 文件。您可以通过 nuxt 提供的 these options 干扰 webpack 配置。体验更多 sass loader 配置可以查看webpack sass loader section。

别忘了安装 node-sass 和 sass-loader 来使用 sass/scss 文件 如nuxt documentation 所述，在您的应用中。

// nuxt.config.js

build: 
  loaders: 
    sass: 
        prependData: "@import '~bulma/sass/utilities/_all.sass;",