Unable to build Nuxt due to a problem with PostCSS when using Bulma and Buefy (nuxt-buefy)

Question

Using the following config, everything was working fine via npm run dev, but when we did npm run build, there was an error:

ERROR in ./assets/scss/main.scss (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/scss/main.scss) Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js): ParserError: Syntax Error at line: 1, column 23

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'app-name',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/open-sans-all/css/open-sans.min.css' },
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/scss/main.scss',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~/plugins/vee-validate.js', ssr: true },
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    ['nuxt-buefy', { css: false }]
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['vee-validate'],
  }
}

assets/scss/main.scss

// bulma/buefy overrides
$family-sans-serif: "Open Sans", "Arial", sans-serif !important;

$input-border-color: white;
$input-shadow: none;
$input-radius: 0px;

// Import bulma styles
@import "~bulma";

// Import buefy styles
@import "~buefy/src/scss/buefy";

package.json

  "dependencies": {
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-buefy": "^0.4.7",
    "vee-validate": "^3.4.7",
    "vue-clickaway": "^2.2.2"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^4.0.1",
    "fibers": "^5.0.0",
    "postcss": "^8.2.8",
    "sass": "^1.34.0",
    "sass-loader": "^10.2.0"
  }

We traced the build error to @import "~buefy/src/scss/buefy"; in main.scss. The project build successfully with that commented out.

Further analysis lead to this code in node_modules/buefy/buefy.css:

.columns.is-variable {
  --columnGap: 0.75rem;
  margin-left: calc(-1 * var(--columnGap));
  margin-right: calc(-1 * var(--columnGap));
}

Commenting out that code allowed the build to succeed.

Also changing it from multiplying -1 to 1 allowed it to succeed.

Answer 1

Extreme forensic Googling lead us to this GitHub post here: https://github.com/jgthms/bulma/issues/1190#issuecomment-356672849

It contains nice detail about how the error occurred, and the solution is quite simple.

You have two choices.

1. Suppress the build warning in your Nuxt config;

2. Disable variable-columns in Bulma.

We recommend suppressing the build warning in your Nuxt config because it allows variable-columns to still work, and this option is good unless you require to support old browsers that don't support scoped CSS variables. Read the above GitHub post to learn more.

To disable the warning, modify your nuxt.config.js file like this:

  build: {
    transpile: ['vee-validate'],
    postcss: {
      plugins: {
        "postcss-custom-properties": false
      },
    },
  }

If you must support older browsers, it could be better to modify your main.scss file like this:

// bulma/buefy overrides
$family-sans-serif: "Open Sans", "Arial", sans-serif !important;

$input-border-color: white;
$input-shadow: none;
$input-radius: 0px;

$variable-columns: false;

// Import bulma styles
@import "~bulma";

// Import buefy styles
@import "~buefy/src/scss/buefy";