时间戳

首页 > 解决方案 > 使用 Bulma 和 Buefy (nuxt-buefy) 时，由于 PostCSS 出现问题，无法构建 Nuxt

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

问题描述

使用以下配置，通过 一切正常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允许它成功。

标签： nuxt.jstailwind-cssbulmapostcssbuefy

解决方案

极端法医谷歌搜索将我们带到这里的 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";

推荐阅读