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

Question

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

这是我的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文件：

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

这是终端中的错误消息：

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

谁能看到我做错了什么？

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

Answer 1

好的，我无法让它与 nuxt-sass-resources-loader 一起工作，但我确实让它与这里的 style-resources-module 一起工作https://github.com/nuxt-community/style-resources-module . 一旦我安装了 style-resources-module，我就将它添加到我的 nuxt.config.js modules 部分并添加了相应的 styleResources 部分，如下所示：

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

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