由于使用 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'],
  }
}

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

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

我们将构建错误@import "~buefy/src/scss/buefy";追溯到main.scss。该项目已成功构建并被注释掉。

进一步分析导致此代码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";