使用以下配置,一切正常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";
in 主文件。该项目已成功构建并被注释掉。
进一步分析得出此代码node_modules/buefy/buefy.css
:
.columns.is-variable {
--columnGap: 0.75rem;
margin-left: calc(-1 * var(--columnGap));
margin-right: calc(-1 * var(--columnGap));
}
注释掉该代码可以使构建成功。
也从乘法改变它-1
to 1
让它成功。