Nuxt.js: Getting sass error when including bulme. Using adonuxt.

[alanaasmaa]

Hi, I cant figure out why i'm gettin this error, i even tryed to import it old fashioned way.

 warning  in ./node_modules/bulma/bulma.sass

(Emitted value instead of an instance of Error) postcss-custom-properties: C:\Users\alanaasmaa\Code\project\node_modules\bulma\bulma.sass:5466:5: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable.is-8 { ... --columnGap: ... })

 @ ./node_modules/bulma/bulma.sass 4:14-152 13:3-17:5 14:22-160
 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["C://Users//alanaasmaa//Code//project//node_modules//babel-preset-vue-app//dist//index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
 @ ./.nuxt/App.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js

my nuxt cnf

  css: [
    'bulma',
    '~assets/css/main.scss'
  ],

_{This question is available on Nuxt.js community (#c1495)}

[motia]

I am having the same issue. Note, It is only a warning, you can just ignore it because the generated css is correct anyway.

As [email protected] uses css variables, PostCSS tries to parse them as postcss-custom-properties but it fails.

https://github.com/jgthms/bulma/blob/5355542bbe42d19ea9a113d31807dfafe41f05c1/sass/grid/columns.sass#L320

However, it will be nice if someone experienced with PostCss tells us if some configuration can fix the warning, @alanaasmaa.

[alanaasmaa]

@motia Yes i ignored it for now after googled many hours.

[RyosukeCla]

@alanaasmaa @motia I found the solution. This works for me.
nuxt.config.js

 build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    }
  }

ref

https://nuxtjs.org/api/configuration-build#postcss

[motia]

@RyosukeCla , that is it, thanks a lot.

[moshemo]

It's also possible to turn off value warnings (whatever those are) and only show error warnings -- as mentioned here: https://github.com/postcss/postcss-custom-properties#novaluenotifications. I believe that should solve the Bulma problem while still being of benefit if you try to use an undefined variable.

However, I couldn't figure out how to get it to work. I tried this and it did not work:

build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': {
          'noValueNotifications': 'error'
        }
      }
    }
}

If someone else knows how to get it to work, I'd appreciate it if they could post the code.

[RyosukeCla]

@moshemo

What about this

    postcss: {
      plugins: {
        'postcss-custom-properties': {
          warnings: false
        }
      }
    },

[Oliboy50]

so is it a bug on bulma side? :/
I didn't had these warnings using bulma 0.5.1 but here they come with bulma 0.5.3

[natecox]

There is a closed issue about this here: https://github.com/jgthms/bulma/issues/1190

I'm not actually using postcss on my project, so adding the above code snippets to turn warnings off results in a fatal compile error for dependencies.

[jaslocum]

RyosukeCla's post saved the day for me. In my case, it wasn't just warning messages. My bulma components were not rendering. A huge thanks to RyosukeCla.

[AdsonCicilioti]

@RyosukeCla For me not work.

My Css looks like this:

in nuxt.config.js:

  /*
  ** Global CSS
  */
  css: ['~/assets/style/src/main.scss'],

This main.scss looks like this:

// BULMA utilities
@import '../../../node_modules/bulma/sass/utilities/all';

// Theming
@import './css-vars';
@import './theme-vars';

// Bases
@import '../../../node_modules/bulma/bulma';
@import '../../../node_modules/buefy/src/scss/buefy';

The css-vars.scss file contains some css variables with values that will serve the sass variables of the theme-vars.scss file, with the intention that all classes that use these variables receive the variable css and not the value of it. Example:
Desired final output:

.is-primary {
  background-color: var(--primary);
}
// or with fallback
.is-primary {
  background-color: var(--primary, #7957d5);
}

Current output (unwanted):

.is-primary {
  background-color:  #7957d5;
}

My nuxt.conf.js like this:

const pkg = require('./package')
const purgecss = require('@fullhuman/postcss-purgecss')
const postcssCustomProps = require('postcss-custom-properties')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#FFFFFF' },

  /*
  ** Global CSS
  */
  css: ['~/assets/style/src/main.scss'],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: ['@/plugins/buefy'],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extractCSS: true,

    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

    postcss: {
      plugins: [
        purgecss({
          content: [
            './pages/**/*.vue',
            './layouts/**/*.vue',
            './components/**/*.vue'
          ],
          whitelist: ['html', 'body'],
          whitelistPatterns: [/nuxt-/]
        }),
        postcssCustomProps({
          warnings: false,
          preserve: true
        })
      ]
    }
  }
}

The postcss-custom-properties': false setting, or postcss-custom-properties': { preserve: true } should make the css variables in css-vars.scss be kept in the final css file - this is mine intention. - but this does not happen.

Would anyone know how to give me a way to solve this and keep the css variables in the final css file?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.