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

Question

我创建了一个包含 Bulma 的 Nuxt 应用程序，并希望 access/override 我的 .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 文件中的导入工作正常。

Answer 1

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

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

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

Answer 2

此配置选项提供通过 webpack 在其他文件之前加载您指定的任何 scss/sass 文件。您可以通过 these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.

干预 webpack 配置

Don't forget install node-sass and sass-loader to use sass/scss file in your app as mentioned by nuxt documentation.

// nuxt.config.js

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

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

Nuxt Bulma app can't access SCSS variables

sass

vue.js

bulma

nuxt.js