vue.js - Nuxt Bulma应用程序无法访问SCSS变量

我创建了一个包含Bulma的Nuxt应用程序，并希望访问/覆盖.vue文件中的Bulma变量。我遵循了here指令，该指令似乎与我在其他几个位置中找到的指令相匹配，但是尝试访问$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文件:

<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

谁能看到我在做什么错？

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

最佳答案

好的，我无法使其与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'
    ]
},