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时找不到该样式表。

根据错误信息，问题可能出现在几个地方：

文件路径不正确。
Vite配置中未正确设置别名（alias）或未配置sass预处理器。

通常，我们使用@作为src目录的别名。在Vite中，默认没有设置这个别名，所以我们需要在vite.config.js中手动配置别名。

此外，在Vue单文件组件的样式部分，我们使用@use引入SCSS文件，这需要确保路径正确且配置了别名。

解决方案步骤：

确认bem.scss文件的位置。通常，我们会把它放在src目录下，所以路径应该是src/bem.scss。
在vite.config.js中配置别名（alias）将@指向src目录。
确保在Vue文件中使用正确的引入路径。
如果使用了SCSS，可能需要安装sass预处理器（因为Vite默认只支持CSS，对SCSS需要安装额外的预处理器）。

具体操作：

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

bash 复制代码

npm install -D sass

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

我们需要使用resolve.alias来设置别名。

第三步：在App.vue中，我们使用@use "@/bem.scss" as *;，这依赖于别名@指向src目录。

示例配置vite.config.js：

javascript 复制代码

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中使用相对路径引入：

scss 复制代码

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

但是，这样只能解决App.vue的问题，如果其他组件也需要引入，还是推荐使用别名。

另外，如果是在组件内引入，确保路径相对于当前组件文件的位置正确。

如果以上步骤还不能解决问题，请提供项目结构（特别是bem.scss的位置）和vite.config.js的完整配置，以便进一步排查。

在 Vue 3 + Vite 项目中遇到 @use "@/bem.scss" 报错通常是由于路径别名未正确配置或预处理器设置问题。以下是完整解决方案：

解决方案

确保安装了 SASS 预处理器
npm install -D sass
或
yarn add -D sass
配置路径别名（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需要安装 @types/node

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 确保指向 src 目录
}
}
})
添加全局 SASS 配置（可选但推荐）
在 vite.config.js 中添加：

export default defineConfig({
// ...其他配置
css: {
preprocessorOptions: {
scss: {
additionalData: @import "@/styles/variables.scss"; // 全局引入文件
}
}
}
})
检查文件结构
确保文件路径正确：

src/

├── bem.scss // 直接放在 src 下

├── styles/

│ └── bem.scss // 或放在 styles 目录

└── App.vue

修改引入方式（App.vue）
重启开发服务器
npm run dev
常见问题排查
文件不存在：确认 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 导入应该可以正常工作。