[sass] Can’t find stylesheet to import.
?
1 │ @use “@/bem.scss” as *;
│ ^^^^^^^^^^^^^^^^^^^^^^
?
src\App.vue 1:1 root stylesheet

分析

我們遇到了一個在Vue3項目中使用Vite時，在vite.config.js中引入bem.scss文件報錯的問題。錯誤信息指出在App.vue中引入@/bem.scss時找不到該樣式表。

根據錯誤信息，問題可能出現在幾個地方：

1. 文件路徑不正確。

2. Vite配置中未正確設置別名（alias）或未配置sass預處理器。

通常，我們使用@作為src目錄的別名。在Vite中，默認沒有設置這個別名，所以我們需要在vite.config.js中手動配置別名。

此外，在Vue單文件組件的樣式部分，我們使用@use引入SCSS文件，這需要確保路徑正確且配置了別名。

解決方案步驟：

1. 確認bem.scss文件的位置。通常，我們會把它放在src目錄下，所以路徑應該是src/bem.scss。

2. 在vite.config.js中配置別名（alias）將@指向src目錄。

3. 確保在Vue文件中使用正確的引入路徑。

4. 如果使用了SCSS，可能需要安裝sass預處理器（因為Vite默認只支持CSS，對SCSS需要安裝額外的預處理器）。

具體操作：

第一步：安裝sass（如果尚未安裝）

npm install -D sass

第二步：配置別名（alias）在vite.config.js中

我們需要使用resolve.alias來設置別名。

第三步：在App.vue中，我們使用@use "@/bem.scss" as *;，這依賴于別名@指向src目錄。

示例配置vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需要引入path模塊
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {alias: {'@': path.resolve(__dirname, './src') // 設置別名}},css: {preprocessorOptions: {scss: {// 這里可以配置全局scss變量等，但我們的問題主要是路徑，所以別名配置是關鍵// 如果你有全局的scss文件需要引入，可以在這里配置，但當前問題不是全局引入，而是在組件內引入}}}
})

注意：以上配置使用了Node.js的path模塊，所以確保在文件頂部引入了path。

如果配置后仍然報錯，請檢查以下幾點：

• 確保bem.scss文件確實存在于src目錄下。

• 檢查文件大小寫（尤其是在大小寫敏感的操作系統上），確保文件名一致。

• 嘗試重啟開發服務器（因為配置更改可能需要重啟）。

如果問題仍然存在，可以嘗試在App.vue中使用相對路徑引入：

@use "./bem.scss" as *;

但是，這樣只能解決App.vue的問題，如果其他組件也需要引入，還是推薦使用別名。

另外，如果是在組件內引入，確保路徑相對于當前組件文件的位置正確。

如果以上步驟還不能解決問題，請提供項目結構（特別是bem.scss的位置）和vite.config.js的完整配置，以便進一步排查。

在 Vue 3 + Vite 項目中遇到 @use “@/bem.scss” 報錯通常是由于路徑別名未正確配置或預處理器設置問題。以下是完整解決方案：

解決方案

1. 確保安裝了 SASS 預處理器
   npm install -D sass
   或
   yarn add -D sass
2. 配置路徑別名（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需要安裝 @types/nodeexport default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src') // 確保指向 src 目錄}}
})

3. 添加全局 SASS 配置（可選但推薦）
   在 vite.config.js 中添加：

export default defineConfig({// ...其他配置css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";` // 全局引入文件}}}
})

4. 檢查文件結構
   確保文件路徑正確：

src/
├── bem.scss // 直接放在 src 下
├── styles/
│ └── bem.scss // 或放在 styles 目錄
└── App.vue
5. 修改引入方式（App.vue）

<style lang="scss">
/* 方式1：使用別名（需配置alias） */
@use "@/bem.scss" as *;/* 方式2：相對路徑（推薦） */
@use "./bem.scss" as *;
</style>

7. 重啟開發服務器
   npm run dev
8. 常見問題排查
   文件不存在：確認 bem.scss 是否在 src/ 目錄下
   大小寫敏感：檢查文件名是否實際為 Bem.scss（Linux系統區分大小寫）
   緩存問題：嘗試刪除 node_modules/.vite 緩存目錄
   路徑配置錯誤：在 vite.config.js 中打印路徑確認：

console.log(path.resolve(__dirname, './src')) // 應該輸出絕對路徑

替代方案：全局引入
在 vite.config.js 中全局引入：

export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@use "@/bem.scss" as *;` }}}
})

重要提示：使用 Vue SFC 時，<style> 標簽內的路徑是相對于當前文件解析的，而 additionalData 中的路徑是相對于項目根目錄解析的。

完成以上步驟后，重新啟動開發服務器，SCSS 導入應該可以正常工作。