Vuetify SassError: Expected identifier

Question

Error in sass files Vuetify inside. I tried to put the dependency below the version, it did not help. What to do about it?

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--6-oneOf-1-4!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
   ╷
34 │         .v-application .red.#E82550{
   │                             ^
   ╵
  node_modules/vuetify/src/styles/generic/_colors.scss 34:29  @import
  node_modules/vuetify/src/styles/generic/_index.scss 2:9     @import
  node_modules/vuetify/src/styles/main.sass 38:9              root stylesheet

Please, look at my Package.json

{
  "name": "test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/laravel-echo": "^1.1.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@nuxtjs/svg": "^0.1.12",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.7.0",
    "lodash.clonedeep": "^4.5.0",
    "nuxt": "^2.14.7",
    "pusher-js": "^7.0.1",
    "vue-fullscreen": "^2.1.6",
    "vue-perfect-scrollbar": "^0.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@nuxt/types": "^2.14.7",
    "@nuxtjs/vuetify": "^1.11.2",
    "babel-loader": "^8.2.1",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.2"
  }
}

nuxt.config.js

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

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'nlmk--front',
    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' }
    ]
  },

  styleResources: {
    sass: [
      './assets/styles/sass/_variables.sass',
      './assets/styles/sass/_mixins.sass',
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    './assets/styles/sass/_reset.sass',
    './assets/fonts/roboto/roboto.css',
    './assets/styles/sass/default.sass',
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/resize',
    //'~/plugins/vuetify',
    '~/plugins/fullscreen'
  ],
  vuetify: {},
  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    '@nuxtjs/vuetify',
  ],
  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/svg',
    '@nuxtjs/style-resources',
    'cookie-universal-nuxt',
    '@nuxtjs/laravel-echo',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    debug: false,
    retry: { retries: 3 },
    baseURL: process.env.API_URL
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    extend(config, { isDev, isClient, isServer }) {
      if (!isDev) {
        config.output.publicPath = '/_nuxt/'
      }
    }
  }
}

Error in sass files Vuetify inside. I tried to put the dependency below the version, it did not help. What to do about it?

enter image description here

Does this answer your question? [CSS classes with special characters](https://stackoverflow.com/questions/32273188/css-classes-with-special-characters) — Quentin, Nov 25 '20 at 11:38
Do you have a `vue.config.js` file? If so, add it to the question, it may help to understand the problem — Dima Kuzmich, Nov 25 '20 at 17:59

score 6 · Answer 1 · answered Apr 18 '21 at 18:31

6

Had a similar error. It was very annoying because it came with the "default" project vue create prj / vue add vuetify after copy pasting the example for v-select from the vuetify page...

Other posts I've seen suggest using sass and not node-sass, but I was already doing that. (check your project's package.json file)

I found the solution for a similar problem I had was to install an older version of sass:

npm install sass@1.32.8

answered Apr 18 '21 at 18:31

ntg

12,950
7
74
95

2

Thanks, it works! By the way, better to install it as a dev dependency with `npm install --save-dev sass@1.32.8` – Bruno Martins Dec 15 '21 at 17:07

score 1 · Answer 2 · answered Dec 28 '20 at 19:37

1

Catch same issue right now. Look here https://vuetifyjs.com/en/features/sass-variables/#variable-api

Guess you have variables.scss file and vuetify plugin try to resolve it and crashes.

I've simply renamed it in a way of fast workaround and it's works.

answered Dec 28 '20 at 19:37

Yuriy Cherkashin

21
4

Damn, I lost so much time trying many sass versions, but that was the solution to my issue.. I didn't saw it because it had -1 – holyris Jan 10 '22 at 15:43

Vuetify SassError: Expected identifier

2 Answers2