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

Question

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

./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）模块构建失败（来自./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js）：ParserError：语法错误在行: 1，第 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"
  }

我们将构建错误追溯到 ma​​in.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 帖子：https://github.com/jgthms/bulma/issues/1190#issuecomment-356672849

它包含有关错误如何发生的详细信息，并且解决方案非常简单。

你有两个选择。

1. 抑制 Nuxt 配置中的构建警告；

2. 在 Bulma 中禁用变量列。

我们建议在 Nuxt 配置中禁止生成警告，因为它允许变量列仍然有效，并且此选项很好，除非您需要支持不支持范围 CSS 变量的旧浏览器。阅读上面的 GitHub 帖子以了解更多信息。

要禁用警告，请修改您的 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";