使用Vite构建Vue3组件库时bulma-scss中@extend规则构建失败问题

这个报错的核心原因很明确：你单独导入的bulma-scss/elements/button模块里，@extend %control这行代码依赖的%control占位符选择器，是定义在Bulma的核心基础模块中的——只导入button模块的话，这些基础模块没被加载，Sass自然找不到目标选择器。

下面是两种既能按需导入、又能解决报错的方案，按推荐程度排序：

方案一：按需导入Bulma核心基础依赖+目标模块 #

Bulma的组件模块都依赖一些核心的工具类、变量和占位符，我们只需要提前导入这些必要的基础模块，再导入目标组件模块即可。

你可以直接在Vue组件的<style>标签里这样写：

<style lang="scss">
// 先导入Bulma核心基础依赖，包含%control等占位符的定义
@import 'bulma-scss/utilities/initial-variables';
@import 'bulma-scss/utilities/functions';
@import 'bulma-scss/utilities/mixins';
@import 'bulma-scss/base/helpers';

// 再导入你需要的Button模块
@import 'bulma-scss/elements/button';
</style>

如果多个组件都需要用到Bulma的模块，建议把这些基础依赖抽成一个单独的SCSS文件（比如src/styles/bulma-base.scss），避免重复代码：

// src/styles/bulma-base.scss
@import 'bulma-scss/utilities/initial-variables';
@import 'bulma-scss/utilities/functions';
@import 'bulma-scss/utilities/mixins';
@import 'bulma-scss/base/helpers';

之后在组件里只需导入这个基础文件+目标模块：

<style lang="scss">
@import '@/styles/bulma-base.scss';
@import 'bulma-scss/elements/button';
</style>

这种方式既能保证按需加载，又不会引入多余的Bulma代码，是最优解。

方案二：用!optional修饰@extend（不推荐，仅临时应急） #

如果你不想导入任何基础模块，可以修改bulma-scss包中的代码，给报错的@extend添加!optional标记——这样当Sass找不到目标选择器时，会跳过这条规则而不报错。

但直接修改node_modules里的文件不持久，更新包后会失效，推荐用patch-package来持久化修改：

1. 安装依赖：

npm install patch-package --save-dev

2. 找到node_modules/bulma-scss/elements/_button.scss的第71行，把：

@extend %control;

改成：

@extend %control !optional;

3. 生成补丁文件：

npx patch-package bulma-scss

4. 在package.json的scripts中添加：

"postinstall": "patch-package"

这样每次执行npm install后，补丁都会自动应用。

⚠️ 注意：这种方式可能导致Button组件丢失部分依赖%control的样式，所以仅作为临时方案使用。

验证 #

完成上述任一方案后，执行vite build，应该就能顺利完成构建，且打包体积不会因为导入完整Bulma而膨胀。

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