Question

我创建了一个包含{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中的导入正常。

Answer 1

此配置选项提供了通过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;",
      }
    }
  }

Answer 2

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

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

2 个答案: