nuxtvuetify는 SasError: ID가 필요합니다.

nuxtvuetify는 SasError: ID가 필요합니다.

Nuxt 2.15.4 및 Nuxt/vuetify 1.11.3을 사용하고 있습니다.

프로젝트는 정상적으로 동작하고 있었습니다만, 빌드중의 새로운 서버로 이행했을 때에, 다음의 에러가 발생했습니다.

이것은 제 소포입니다.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};
        `
      }
    },
  }
}

새로운 서버에 에러가 발생했을 때에도, localhost는 정상적으로 동작하고 있었습니다.그리고 나는 삭제했다.node_modules그리고.package-lock.json및 사용npm i현재 localhost에도 이러한 오류가 발생하고 있습니다.무엇이 문제의 원인인지 아는 사람이 있습니까?

인스톨npm install sass@1.32.8이 문제는 당분간 해결됩니다.nuxt + 실을 사용하는 경우 패키지의 해상도 속성에서 설정해야 할 수 있습니다.json, 그러나 일반적으로 권장되는 솔루션은 https://github.com/sass/dart-sass/issues/1287입니다.

근본 원인은 공백만 포함된 행을 문제 삼는 새 버전의 sass입니다.

내 경우엔 '^'도 빼야 했고, 그렇지 않으면npm install는 버전 "1.32.10"을 다운로드합니다.

"sass": "1.32.8",

같은 에러가 발생.변경했습니다.sass-loader&less-loader하위 버전에 종속됩니다.추가sass의존.

내 소포 안에.json

"less": "^4.1.1",
"less-loader": "^2.0.0",
"sass": "1.32.8",
"sass-loader": "10.1.1",

이틀 전부터 같은 문제가 발생하여 Nuxtjs와 Vuetify에서 몇 가지 버전을 다시 사용하려고 했지만 아무 것도 작동하지 않았습니다.

트리쉐이크를 무력화시킨 게 날 위해 한 일이었어. 일시적인 일이었으면 좋겠어.

알려주셔서 감사합니다.

vuetify의 treeShake 옵션에 의해 발생한 것 같습니다.따라서 이 옵션을 제거(또는 false)하면 모든 것이 정상으로 돌아갑니다.

*** UPDATE *** Tree Shake 삭제는 개발에서만 동작하며 에러가 발생합니다.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
        }
      }
    }
  },

갱신하다

마지막으로 트리를 켜면 쉐이크를 하고 놀랍게도 "sass"로 작업합니다: "1.32.13", "nuxt": "2.15.4", "@nuxtjs/vuetify": "1.11.3"

언급URL : https://stackoverflow.com/questions/67138844/nuxt-vuetify-gives-sasserror-expected-identifier