由于使用 Bulma 和 Buefy (nuxt-buefy) 时 PostCSS 出现问题，无法构建 Nuxt

Question

使用以下配置，通过 npm run dev 一切正常，但是当我们 npm run build 时，出现错误：

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

我们将构建错误追溯到 main.scss 中的 @import "~buefy/src/scss/buefy";。项目构建成功，注释掉了。

进一步分析得到node_modules/buefy/buefy.css中的这段代码：

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

注释掉该代码允许构建成功。

同时将乘法 -1 更改为 1 使其成功。

Answer 1

极端的取证谷歌搜索将我们带到这里 GitHub post：https://github.com/jgthms/bulma/issues/1190#issuecomment-356672849

它详细说明了错误是如何发生的，解决方法也很简单。

你有两个选择。

在您的 Nuxt 配置中抑制构建警告；
在 Bulma 中禁用变量列。

我们建议在您的 Nuxt 配置中抑制构建警告，因为它允许变量列仍然有效，并且此选项很好，除非您需要支持不支持作用域 CSS 变量的旧浏览器。阅读以上 GitHub post 以了解更多信息。

要禁用警告，请像这样修改您的 nuxt.config.js 文件：

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

如果您必须支持旧版浏览器，最好像这样修改您的 main.scss 文件：

// 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";

由于使用 Bulma 和 Buefy (nuxt-buefy) 时 PostCSS 出现问题，无法构建 Nuxt

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

nuxt.js

tailwind-css

bulma

postcss

buefy