What is NUXT Warning “Emitted value instead of an instance of Error” about?

Question

I got this compiling warnings after applying this NUXT tutorial for adding Bulma as Global CSS:

[email protected] dev /home/lsoave/Vue/nuxt-starter nuxt

nuxt:build App root: /home/lsoave/Vue/nuxt-starter +0ms nuxt:build Generating /home/lsoave/Vue/nuxt-starter/.nuxt files... +2ms
nuxt:build Generating files... +8ms nuxt:build Generating routes... +13ms nuxt:build Building files... +31ms nuxt:build Adding webpack middleware... +688ms ████████████████████ 100%

Build completed in 5.51s

WARNING Compiled with 14 warnings
13:30:56

warning in ./node_modules/bulma/css/bulma.css

(Emitted value instead of an instance of Error) postcss-custom-properties: /home/lsoave/Vue/sass/grid/columns.sass:469:4: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable { ... --columnGap: ... })

@ ./node_modules/bulma/css/bulma.css 4:14-118 13:3-17:5 14:22-126
@ ./.nuxt/App.js @ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

...

Does anybody know why and how to get rid of those ?

Answer 1

As @P3trur0 stated in the comment, you should add the following to nuxt.config.js:

  /*
  ** Build configuration
  */
  build: {
    ...,
    postcss: {
      plugins: {
        "postcss-custom-properties": false
      }
    },
  }