Nuxt Bulma app can't access SCSS variables

Question

I've created a Nuxt app with Bulma included and would like to access/override the Bulma variables in my .vue files. I've followed the instructions here which seem to match what I found in several other locations but I'm still getting an error when trying to access the $primary variable in my .vue file.

Here's my assets/css/main.scss file:

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

My nuxt.config.js modules section:

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

And my .vue file:

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

<script>
export default {
};
</script>

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

Here's the error message in the terminal:

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

Can anyone see what I'm doing wrong?

UPDATE: I've narrowed it down to the nuxt.config.js modules setup by importing the .scss directly in the .vue file. This works which tell me the imports in the main.scss the file is working fine.

Answer 1

Okay, I wasn't able to get it working with nuxt-sass-resources-loader but I did get it working with style-resources-module from here https://github.com/nuxt-community/style-resources-module. Once I installed style-resources-module, I just added it to my nuxt.config.js modules section and added the appropriate styleResources section as follows:

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

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

Answer 2

This config options provides to load any scss/sass file that specified by you before other files via webpack. You can interfere webpack config via these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.

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;",
      }
    }
  }