我有一个带有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"
}
}
1条答案
按热度按时间66bbxpm51#
已解决:将Sass降级到“^1.39.0”。Sass 1.4x.x和1.5x.x失败。
不确定这是一个webpack还是sass不匹配,但现在我可以运行
npm run generate
没有问题。我希望我能为这个项目使用nuxt 3。