nuxt vuetify 给出 SassError: Expected identifier
Posted
技术标签:
【中文标题】nuxt vuetify 给出 SassError: Expected identifier【英文标题】：nuxt vuetify gives SassError: Expected identifier 【发布时间】：2021-07-12 06:48:32 【问题描述】：我正在使用 Nuxt 2.15.4 和 nuxt/vuetify 1.11.3
我的项目运行良好，但是当我在构建时将其移动到新服务器时出现以下错误：
这是我的 package.json 文件
"name": "myproject",
"version": "1.0.0",
"private": true,
"scripts":
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
,
"dependencies":
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/axios": "^5.13.1",
"@nuxtjs/device": "^2.1.0",
"@nuxtjs/google-gtag": "^1.0.4",
"@nuxtjs/gtm": "^2.4.0",
"chart.js": "^2.9.3",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
"jquery": "^3.5.1",
"nuxt": "^2.15.3",
"swiper": "^5.4.5",
"v-viewer": "^1.5.1",
"vee-validate": "^3.3.7",
"vue-awesome-swiper": "^4.1.1",
"vue-chartjs": "^3.5.0",
"vue-cropperjs": "^4.1.0",
"vue-easy-dnd": "^1.10.2",
"vue-glide-js": "^1.3.14",
"vue-persian-datetime-picker": "^2.2.0",
"vue-product-zoomer": "^3.0.1",
"vue-slick-carousel": "^1.0.6",
"vue-sweetalert2": "^4.2.1",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.24.0"
,
"devDependencies":
"@fortawesome/fontawesome-free": "^5.15.1",
"@mdi/font": "^5.9.55",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/vuetify": "1.11.3",
"flipclock": "^0.10.8",
"font-awesome": "^4.7.0",
"noty": "^3.2.0-beta",
"nuxt-gsap-module": "^1.2.1",
"css-loader": "^5.0.0",
"sass-loader": "^10.1.1",
"less-loader": "^6.1.2"
还有我的 nuxt.config
import colors from 'vuetify/es5/util/colors'
const env = require('dotenv').config()
const webpack = require('webpack')
export default
telemetry: false,
loading:
color: 'green',
failedColor: 'red',
height: '3px'
,
// serverMiddleware: ['~/api/index.js'],
router:
// base: process.env.NUXT_BASE_URL || '/'
,
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head:
// titleTemplate: '%s - ' + process.env.npm_package_name,
// title: process.env.npm_package_name || '',
// titleTemplate: '%s - ' + process.env.SITE_TITLE,
title: process.env.SITE_TITLE + ' | ' + process.env.SITE_SHORT_DESC || '',
htmlAttrs:
lang: process.env.SITE_LANGUAGE || 'en'
,
meta: [
charset: 'utf-8' ,
name: 'viewport', content: 'width=device-width, initial-scale=1' ,
hid: 'keywords', name: 'keywords', content: process.env.SITE_KEYWORDS || '' ,
hid: 'description', name: 'description', content: process.env.SITE_DESCRIPTION || '' ,
hid: 'robots', name: 'robots', content: process.env.SITE_ROBOTS || '' ,
hid: 'googlebot', name: 'googlebot', content: process.env.SITE_GOOGLE_BOT || '' ,
hid: 'bingbot', name: 'bingbot', content: process.env.SITE_BING_BOT || '' ,
hid: 'og:locale', name: 'og:locale', content: process.env.SITE_OG_LOCALE || '' ,
hid: 'og:type', name: 'og:type', content: process.env.SITE_OG_TYPE || '' ,
hid: 'og:title', name: 'og:title', content: process.env.SITE_OG_TITLE || '' ,
hid: 'og:description', name: 'og:description', content: process.env.SITE_OG_DESCRIPTION || '' ,
hid: 'og:url', name: 'og:url', content: process.env.SITE_BASE_URL || '' ,
hid: 'og:site_name', name: 'og:site_name', content: process.env.SITE_OG_SITENAME || '' ,
hid: 'theme-color', name: 'theme-color', content: process.env.SITE_THEME_COLOR || '' ,
hid: 'msapplication-navbutton-color', name: 'msapplication-navbutton-color', content: process.env.SITE_MSAPP_NAVBTN_COLOR || '' ,
hid: 'apple-mobile-web-app-status-bar-style', name: 'apple-mobile-web-app-status-bar-style', content: process.env.SITE_APPLE_WM_STATUSBAR_STYLE || '' ,
hid: 'X-UA-Compatible', 'http-equiv': 'X-UA-Compatible', content: process.env.SITE_X_UA_Compatible || '' ,
hid: 'google-site-verification', name:'google-site-verification', content: 'T_NpyOb-VoAjaAcnhB8b9MTslHVfhtfcLNf2dvBtlfI' ,
],
link: [
rel: 'icon', type: 'image/x-icon', href: process.env.SITE_FAVICON ,
// rel: 'shortcut icon', type: 'image/x-icon', href: process.env.SITE_FAVICON ,
rel: 'canonical', href: process.env.SITE_BASE_URL ,
// rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css' ,
]
,
/*
** Global CSS
*/
css: [
'~/assets/scss/vuetify.scss',
'~/assets/scss/style.scss',
'@mdi/font/css/materialdesignicons.css',
'font-awesome/css/font-awesome.min.css',
'@fortawesome/fontawesome-free/css/all.css',
'~/assets/scss/media.scss',
'~/assets/scss/customization.scss',
'~/assets/scss/sweetalert.scss',
'~/assets/scss/noty.scss',
'~/assets/scss/flipclock.scss',
'~/assets/scss/glide.scss',
'~/assets/scss/sorting.scss',
'~/assets/scss/cropper.scss',
'~/assets/scss/transitions.scss',
'~/assets/scss/product-zoom.scss',
'vue-slick-carousel/dist/vue-slick-carousel.css',
'swiper/css/swiper.css',
],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
'plugins/mixins/reqerrors.js',
'plugins/mixins/user.js',
'plugins/mixins/language.js',
'plugins/mixins/shopinfo.js',
'plugins/mixins/formattedprice.js',
'plugins/mixins/utils.js',
'plugins/mixins/cms.js',
'plugins/mixins/client.js',
'plugins/mixins/cart.js',
'plugins/axios.js',
'plugins/veevalidate.js',
'plugins/noty.js',
'plugins/glide.js',
'@plugins/vuedraggable',
'@plugins/vuedraggable',
'@plugins/vue-slick-carousel.js',
src: 'plugins/vuepersiandatepicker.js', mode: 'client',
src: 'plugins/cropper.js', mode: 'client',
src: 'plugins/vue-product-zoomer.js', mode: 'client',
src: 'plugins/vueeditor.js', mode: 'client',
src: 'plugins/nuxt-swiper-plugin.js', mode: 'client'
],
// Auto import components: https://go.nuxtjs.dev/config-components
// components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxtjs/dotenv',
'@nuxtjs/vuetify',
'@nuxtjs/device',
'nuxt-gsap-module',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
// Doc: https://auth.nuxtjs.org/guide/
'@nuxtjs/auth',
// Doc: https://sweetalert2.github.io/
['vue-sweetalert2/nuxt',
confirmButtonColor: '#29BF12',
cancelButtonColor: '#FF3333'
],
'cookie-universal-nuxt',
'@nuxtjs/gtm',
'@nuxtjs/google-gtag',
],
device:
// defaultUserAgent: 'Mozilla/5.0 (Linux; android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36',
refreshOnResize: true
,
gtm:
id: process.env.GOOGLE_TAGS_ID,
// enabled: undefined, /* see https://github.com/nuxt-community/gtm-module */
debug: false,
// layer: 'dataLayer',
// variables: ,
// pageTracking: false,
// pageViewEventName: 'nuxtRoute',
// autoInit: true,
// respectDoNotTrack: true,
// scriptId: 'gtm-script',
// scriptDefer: false,
// scriptURL: 'https://www.googletagmanager.com/gtm.js',
// crossOrigin: false,
// noscript: true,
// noscriptId: 'gtm-noscript',
// noscriptURL: 'https://www.googletagmanager.com/ns.html'
,
'google-gtag':
id: process.env.GOOGLE_ANALYTICS_ID,
// config:
// anonymize_ip: true, // anonymize IP
// send_page_view: false, // might be necessary to avoid duplicated page track on page reload
// linker:
// domains: ['domain.com','domain.org']
//
// ,
debug: false, // enable to track in dev mode
// disableAutoPageTrack: false, // disable if you don't want to track each page route with router.afterEach(...).
// additionalAccounts: [
// id: 'AW-XXXX-XX', // required if you are adding additional accounts
// config:
// send_page_view: false // optional configurations
//
// ]
,
dotenv:
/* module options */
,
gsap:
extraPlugins:
cssRule: false,
draggable: false,
easel: false,
motionPath: false,
pixi: false,
text: false,
scrollTo: false,
scrollTrigger: false
,
extraEases:
expoScaleEase: false,
roughEase: false,
slowMo: true,
,
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios:
baseURL: process.env.API_BASE_URL,
,
/*
** Auth module configuration
** See https://auth.nuxtjs.org/options
*/
auth:
strategies:
local:
endpoints:
login: url: 'auth/login', method: 'post', propertyName: 'token' ,
logout: url: 'auth/logout', method: 'post' ,
user: url: 'auth/info', method: 'get', propertyName: ''
,
redirect:
login: '/login',
// callback: '/login',
home: '',
logout: '/login'
,
cookie:
prefix: 'auth.',
options:
path: '/',
maxAge: process.env.AUTH_COOKIE_MAX_AGE
,
publicRuntimeConfig:
gtm:
id: process.env.GOOGLE_TAGS_ID
,
'google-gtag':
id: process.env.GOOGLE_ANALYTICS_ID,
,
vuetify:
rtl: process.env.SITE_DIRECTION === 'rtl' ? true : false ,
customVariables: ['~/assets/scss/stylevariables.scss'],
icons:
iconfont: 'mdi',
,
treeShake: true,
theme:
dark: false,
themes:
dark:
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
,
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build:
transpile: ['vee-validate/dist/rules'],
plugins: [
new webpack.ProvidePlugin(
'$': 'jquery',
jQuery: "jquery",
"window.jQuery": "jquery",
'_': 'lodash'
),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// postcss:
// preset:
// features:
// customProperties: false,
// ,
// ,
// ,
loaders:
scss:
additionalData: `
$theme_body_color:$process.env.THEME_BODY_COLOR;
$theme_main_color:$process.env.THEME_MAIN_COLOR;
$theme_main_color2:$process.env.THEME_MAIN_COLOR2;
$theme_side_color:$process.env.THEME_SIDE_COLOR;
$theme_side_color2:$process.env.THEME_SIDE_COLOR2;
$theme_link_color:$process.env.THEME_LINK_COLOR;
`
,
即使新服务器出错，我的本地主机也能正常工作。然后我删除了node_modules 和package-lock.json 并使用了npm i；现在我的本地主机也有这些错误
有谁知道是什么导致了这个问题？？
【问题讨论】：
这是最新的 sass 版本中的一个错误，请参阅github.com/sass/dart-sass/issues/1287 【参考方案1】：安装npm install sass@1.32.8 暂时解决了这个问题。如果您使用的是 nuxt + yarn，您可能必须通过 package.json 中的 resolutions 属性进行设置，但通常这是推荐的解决方案：https://github.com/sass/dart-sass/issues/1287
根本原因是新版本的 sass 以某种方式对仅包含空格的行提出了问题。
【讨论】：
问题发生时我有sass@1.32.8，只有treeShake: false 工作【参考方案2】：
在我的情况下，我还必须省略“^”，否则 npm install 下载版本“1.32.10”。
"sass": "1.32.8",
【讨论】：
【参考方案3】：我得到同样的错误。 & 我将 sass-loader & less-loader 依赖项更改为下版本。 & 添加sass 依赖
在我的 package.json 中
"less": "^4.1.1",
"less-loader": "^2.0.0",
"sass": "1.32.8",
"sass-loader": "10.1.1",
【讨论】：
问题发生时我在sass-loader@10.1.1。实际上尝试了一些版本，发现我的产品中不再需要 sass/less loader，因为它是附带的。
@MojtabaBarari 尝试安装sas@1.32.8【参考方案4】：
从 2 天前开始遇到同样的问题，尝试在 Nuxtjs 和 Vuetify 上返回几个版本，但没有任何效果
禁用 treeshake 对我有用，我希望这是暂时的。
感谢您的信息。
【讨论】：
如果我们不想禁用 treeshaking 怎么办？【参考方案5】：看起来是由 vuetify 中的 treeShake 选项引起的，所以通过删除它（或 false），一切都恢复正常了。
*** 更新 ***
删除 treeShake 仅适用于 dev 并且仍然在 npm run build 中给出错误。但是treeShake: false 在dev 和build 上都可以正常工作
// nuxt.config.js
vuetify:
rtl: process.env.SITE_DIRECTION === 'rtl' ? true : false ,
customVariables: ['~/assets/scss/stylevariables.scss'],
icons:
iconfont: 'mdi',
,
treeShake: false,
theme:
dark: false,
themes:
dark:
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
,
更新
终于打开了我的 treeShake 并且令人惊讶地使用了 "sass": "1.32.13" , "nuxt": "2.15.4", "@nuxtjs/vuetify": "1.11.3"
【讨论】：
如果我们不想禁用 treeshaking 怎么办？ @Inyourface ，由于自定义变量，我终于打开了我的 treeShake！ （更改了 vuetify 网格值）并且只得到了由 "sass": "1.32.13" 解决的 Dart 2 错误。所以这些是我的工作版本：“nuxt”：“2.15.4”，“@nuxtjs/vuetify”：“1.11.3”，以上是关于nuxt vuetify 给出 SassError: Expected identifier的主要内容，如果未能解决你的问题，请参考以下文章