我不能使用scss嵌套语法。

一个月一个月

table { &.table { width: 100%; } }results in dev tools
我将我的_table.scss文件导入到main.scss，将main.scss导入到main.jsmain.scssmain.js

这是我的package.json依赖项

{
  "name": "morphzing-vue3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue src --ignore-path .gitignore .",
    "lintfix": "eslint --ext .js,.vue src --ignore-path .gitignore . --fix"
  },
  "dependencies": {
    "@kyvg/vue3-notification": "^2.7.0",
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
    "pinia": "^2.0.23",
    "vue": "^3.2.45",
    "vue-router": "^4.1.5",
    "vuetify": "^3.0.1"
  },
  "devDependencies": {
    "@mdi/js": "^7.0.96",
    "@rushstack/eslint-patch": "^1.1.4",
    "@vitejs/plugin-vue": "^3.1.2",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "prettier": "^2.7.1",
    "sass": "^1.56.1",
    "vite": "^3.1.8"
  }
}

"还有我的vite.config.js"

import { fileURLToPath, URL } from 'node:url'
    
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      server: {
        port: 8080,
        hot: true
      },
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `
              @import "./src/assets/variables.scss";
              @import "./src/assets/theme/colors.scss";
            `
          }
        }
      }
    })

我关注了vite API
如果我在vue组件中使用简单的语法.block .block__item或者使用scss语法-它可以正常工作：

my _table.scss文件中的简单语法

table td {
      vertical-align: middle;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

虚拟组件

<style lang="scss" module>
        .block:global(.v-navigation-drawer--is-hovering) {
          .block__logo {
            padding: 24px;
          }
          .block__nav--nested {
            padding: 0;
            padding-left: 12px;
          }
        }
        .block:not(:global(.v-navigation-drawer--is-hovering)) {
          .block__nav {
            padding: 0;
        
            &--nested {
              padding: 0;
              padding-left: 4px;
            }
          }
        }
    </style>

我也尝试使用sass-loader，它在我的情况下不工作（