Customizing SCSS

Hi,

Where and how do I customize the scss? I want to change the colors of primary etc., but also want to be able to change anything and everything. 😃

I know about: @import "~bulma/sass/utilities/_all"; But I don’t know where to put it. 😦

[bgalvao]

Hi, I am having this issue today, and I followed this guide using @nuxtjs/style-resources.

This is my nuxt.config.js:

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources',
    ['nuxt-buefy', {materialDesignIcons: false}]
  ],
  styleResources: {
    scss: [
      './assets/main.scss'
    ]
  },

But it doesn’t seem to find ./assets/main.scss, as I did a double check and renamed the file to something different than the path specified in nuxt.config.js and it did not throw an error. Am I doing something wrong?

---

Update 13 Feb 2019 (I got it to work)

Ok, I’m not a web developer. I’m a guy that puts things together until it works… So, I was following this customization guide from buefy, and the aforementioned ./assets/main.scss was a copy paste from the file suggested in the buefy guide. I found it odd that the import statements would be at the end of the sample file, but went with it because I thought it was some scss quirk.

What made it work was including the ./assets/main.scss in the css field in the nuxt.config,js.

  /*
  ** Global CSS
  */
  css: [
    // (...)
    './assets/main.scss'
  ],

Only then did nuxt start to look for that file and actually told me that some bulma/buefy variable (such as $white) was not initialized (i.e. imported) and then the only thing I had to do was move those import statements to the top.

Ok, maybe this is obvious for the veteran web devs here, but for beginners I hope this helps.

[anteriovieira]

Hi @erichodges , you can create a file in the assets folder and then import the file by placing it in the css property of nuxt.config.js

assets/my-style.scss

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

// ...

nuxt.config.js

module.exports = {
    ...
    css: [
        'assets/my-style.scss'
    ]
}