Nuxt 2 Bootstrap 5 npm运行生成构建错误

jum4pzuy  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(178)

我有一个带有bs 5的nuxt 2项目,当我运行npm run dev时,一切都按预期工作,但当我运行npm run generate来生成静态文件时,我收到了一个Nuxt Fatal Error Error: Nuxt build error

ERROR in ./assets/scss/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??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/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 38
    at D:\repos\bs5\assets\scss\main.scss:6:65128
    at Parser.error (D:\repos\bs5\node_modules\postcss-values-parser\lib\parser.js:127:11)
    at Parser.operator (D:\repos\bs5\node_modules\postcss-values-parser\lib\parser.js:162:20)
    at Parser.parseTokens (D:\repos\bs5\node_modules\postcss-values-parser\lib\parser.js:245:14)
    at Parser.loop (D:\repos\bs5\node_modules\postcss-values-parser\lib\parser.js:132:12)
    at Parser.parse (D:\repos\bs5\node_modules\postcss-values-parser\lib\parser.js:51:17)
    at parse (D:\repos\bs5\node_modules\postcss-custom-properties\index.cjs.js:47:30)
    at D:\repos\bs5\node_modules\postcss-custom-properties\index.cjs.js:333:24
    at D:\repos\bs5\node_modules\postcss\lib\container.js:194:18
    at D:\repos\bs5\node_modules\postcss\lib\container.js:139:18
    at Rule.each (D:\repos\bs5\node_modules\postcss\lib\container.js:105:16)
    at Rule.walk (D:\repos\bs5\node_modules\postcss\lib\container.js:135:17)
    at D:\repos\bs5\node_modules\postcss\lib\container.js:152:24
    at Root.each (D:\repos\bs5\node_modules\postcss\lib\container.js:105:16)
    at Root.walk (D:\repos\bs5\node_modules\postcss\lib\container.js:135:17)
    at Root.walkDecls (D:\repos\bs5\node_modules\postcss\lib\container.js:192:19)
    at transformProperties (D:\repos\bs5\node_modules\postcss-custom-properties\index.cjs.js:330:8)
 @ ./assets/scss/main.scss 4:14-224
 @ ./node_modules/.cache/nuxt/App.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

 FATAL  Nuxt build error                                                                                                                                                                                               15:18:26  

  at WebpackBundler.webpackCompile (node_modules\@nuxt\webpack\dist\webpack.js:2127:21)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async WebpackBundler.build (node_modules\@nuxt\webpack\dist\webpack.js:2076:5)
  at async Builder.build (node_modules\@nuxt\builder\dist\builder.js:327:5)
  at async ensureBuild (node_modules\@nuxt\cli\dist\cli-generate.js:145:3)
  at async Object.run (node_modules\@nuxt\cli\dist\cli-generate.js:283:7)
  at async NuxtCommand.run (node_modules\@nuxt\cli\dist\cli-index.js:413:7)

错误指向assets\scss\main.scss第1行@import "bootstrap/scss/bootstrap";
我试过很多方法来导入bs 5 scss,dev build总是运行良好,generate总是失败。
还完成了npm安装--save-dev sass sass-loader@10

是否需要在nuxt.config.js中添加一些特殊行?
sass/nuxt版本是否有问题?

nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'bs5',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // 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/bootstrap.client.js' },
  ],

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

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

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
}

将这些行添加到构建中并不能解决问题:

sass: {
  implementation: require('sass')
},
scss: {
  implementation: require('sass')
}

这是我的包. json

{
  "name": "bs5",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:prettier",
    "lintfix": "prettier --write --list-different ."
  },
  "dependencies": {
    "bootstrap": "^5.2.0",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.5.1",
    "sass": "^1.54.8",
    "sass-loader": "^10.3.1"
  }
}

完整存储库位于:https://github.com/lecano/bs5.git

66bbxpm5

66bbxpm51#

已解决:将Sass降级到“^1.39.0”。Sass 1.4x.x和1.5x.x失败。

npm i --save-dev sass@^1.39.0

不确定这是一个webpack还是sass不匹配,但现在我可以运行npm run generate没有问题。
我希望我能为这个项目使用nuxt 3。

相关问题