Vue3项目迁移至Vite时引入bulma-block-list报Unknown Word错误

错误原因 #

你遇到的「unknown word」错误，本质是因为在纯CSS文件中直接导入了SASS模块，Vite默认只会用CSS解析器处理.css文件，无法识别bulma-block-list SASS代码里的SASS特有语法（比如变量、混合指令），从而抛出解析错误。另外bulma-block-list依赖bulma的SASS变量，必须在SASS预处理器上下文里才能正确加载。

解决方案 #

步骤1：确保依赖完整 #

先确认已安装bulma（bulma-block-list的依赖）：

npm install bulma

步骤2：改用SASS文件作为全局样式入口 #

1. 将src/style.css重命名为src/style.sass（或.scss，根据习惯选择）
2. 在新的SASS文件中，先导入bulma的基础工具类，再导入bulma-block-list：

@import "bulma/sass/utilities/_all.sass"
@import "bulma-block-list/src/sass/main.sass"

3. 在main.js中更新导入路径，指向这个SASS文件：

import './style.sass'

备选方案：在Vue组件中局部导入 #

如果不需要全局引入，可以在单个Vue组件的<style>标签中导入（注意加上lang="sass"）：

<style lang="sass">
@import "bulma/sass/utilities/_all.sass"
@import "bulma-block-list/src/sass/main.sass"
/* 其他组件样式 */
</style>

验证 #

重启Vite开发服务器，此时SASS代码会被正确预编译，「unknown word」错误应该会消失。

内容的提问来源于stack exchange，提问作者janosrusiczki