Vuetify SassError：预期的标识符

Posted 2023-02-22

【中文标题】Vuetify SassError：预期的标识符

【英文标题】：Vuetify SassError: Expected identifier

【发布时间】：2021-03-08 06:17:06

【问题描述】：

sass 文件中的错误 Vuetify 里面。我试图将依赖项置于版本之下，但没有帮助。该怎么办？

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

请看一下我的 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/s-s-r-mode)
  s-s-r: 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/'
      
    
  

sass 文件中的错误 Vuetify 里面。我试图将依赖项置于版本之下，但没有帮助。该怎么办？

【问题讨论】：

这能回答你的问题吗？ CSS classes with special characters

编译依赖样式的问题

这门课不是我叫的，是 Vuetify 的

你能展示你的 package.json 吗？

我将其添加到问题中

【参考方案1】：

现在发现同样的问题。 看这里https://vuetifyjs.com/en/features/sass-variables/#variable-api

猜你有variables.scss文件和vuetify插件尝试解决它并崩溃。

我只是以一种快速解决方法的方式对其进行了重命名，它的工作原理。

【讨论】：

该死，我在尝试许多 sass 版本时浪费了这么多时间，但那是我的问题的解决方案。我没有看到它，因为它有 -1

【参考方案2】：

纯粹从 CSS 的角度来看，以下语法没有多大意义： .red.#E82550。具体来说，您在这里似乎有一个错字，您在尝试修改的任何对象中混合了“Class .”和“ID #”选择器。颜色十六进制 #E82550 可以是 Vuetify 中的样式或颜色属性，也可以是带有"Darken and Lighten" syntax might do the trick 的红色

【参考方案3】：

有类似的错误。这很烦人，因为它带有“默认”项目vue create prj/vue add vuetify，在从 vuetify 页面复制粘贴 v-select 示例后...

我看到的其他帖子建议使用 sass 而不是 node-sass，但我已经在这样做了。 （检查您项目的package.json 文件）

我发现我遇到的类似问题的解决方案是安装旧版本的 sass：

npm install sass@1.32.8

【讨论】：

谢谢，它有效！顺便说一句，最好将其安装为 npm install --save-dev sass@1.32.8

的开发依赖项