vite上的vue3 app無法編譯scss語法

Question

我不能使用scss嵌套語法。

_table.scss

table { &.table { width: 100%; } } table { &.table { width: 100%; } }結果在開發工具中

我將我的_table.scss文件導入main.scss並將main.scss導入main.js main.scss main.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";
            `
          }
        }
      }
    })

我關注了邀請 API

如果我在 vue 組件中使用簡單的 syntax.block.block__item 或使用 scss 語法——它工作正常：

我的 _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，它在我的情況下不起作用（

Answer 1

我的同事找到了解決方案。 我們必須通過 url 在main.scss中刪除導入

現在我在 main.scss 中的代碼看起來像這樣

 @import './parts/_table.scss'; @import './typography.scss'; @import './helpers.scss'; @import './variables.scss'; @import './theme/colors.scss';

來自 scss 的嵌套語法正在運行