nuxt vuetify gives SassError: Expected identifier - vue.js

Question

I'm using Nuxt 2.15.4 and nuxt/vuetify 1.11.3
my project was working fine, but when i move it to a new server at build I got these errors:
this is my package.json file
{
"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"
}
}
and my 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};
`
}
},
}
}
even when the new server got error, my localhost was working fine. then i deleted node_modules and package-lock.json and used npm i ; now my localhost is also has these errors
does anyone know what has caused the problem??

Answer 1

Installing npm install sass#1.32.8 fixes the issue for the time being. If you're using nuxt + yarn you might have to set this through the resolutions property in package.json, but in general this is the recommend solution: https://github.com/sass/dart-sass/issues/1287
The underlying cause is new versions of sass somehow taking issue with lines containing only whitespace.

Answer 2

In my case I also had to leave out the "^", otherwise npm install downloads version "1.32.10".
"sass": "1.32.8",

Answer 3

I get same error. & I changed sass-loader & less-loader dependencies to under versions. & add sass dependancy
In my package.json
"less": "^4.1.1",
"less-loader": "^2.0.0",
"sass": "1.32.8",
"sass-loader": "10.1.1",

Answer 4

had the same issue starting 2 days ago, tried going back a few versions on both Nuxtjs and Vuetify but nothing worked
Disabling treeshake did it for me, I hope this is temporary.
Thanks for the info.

Answer 5

Looks like it was caused by treeShake option in vuetify, so by removing it (or false) , every thing went back to normal.
*** UPDATE ***
Removing treeShake only works on dev and still gives error in npm run build. But treeShake: false works fine on both dev and 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
}
}
}
},
Update
finally turned on my treeShake and surprisingly work with "sass": "1.32.13" , "nuxt": "2.15.4", "#nuxtjs/vuetify": "1.11.3"