vue3 vite.config.js 引入bem.scss文件报错

[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 导入应该可以正常工作。