Vite中使用postcss-extend-rule的@extend无法识别Bootstrap全局CSS类

核心问题 #

postcss-extend-rule 默认仅能解析当前样式文件内的类定义，而Bootstrap的全局样式不在单文件组件的<style>上下文范围内，导致插件无法识别.btn/.btn-success这类全局类。

步骤1：安装必要依赖 #

需要postcss-import提前导入Bootstrap的样式文件，让postcss-extend-rule能读取到目标类的定义：

npm install postcss-extend-rule postcss-import --save-dev

步骤2：配置PostCSS #

在项目根目录创建/修改postcss.config.js，确保插件顺序正确（postcss-import需在postcss-extend-rule之前执行）：

export default {
  plugins: [
    require('postcss-import'),
    require('postcss-extend-rule'),
    // 保留你原有的其他PostCSS插件，比如postcss-nesting等
  ]
}

步骤3：在Vue组件中正确使用@extend #

在组件的<style scoped>中先导入Bootstrap源样式，再执行继承操作：

<template>
  <div class="text-center">
    <button type="button" class="my-btn">Success</button>
  </div>
</template>

<style scoped>
/* 导入Bootstrap样式，让PostCSS能解析其中的类定义 */
@import 'bootstrap/dist/css/bootstrap.css';

.my-btn {
  @extend .btn, .btn-success;
  /* 可添加自定义样式 */
  font-weight: 600;
}
</style>

注意事项 #

• 避免重复导入：如果之前在main.ts中全局导入过Bootstrap样式，请移除该导入，否则会导致样式重复加载。
• 按需优化：若不想导入整个Bootstrap，可仅导入按钮相关的样式片段（需切换到Bootstrap的Sass版本，导入源码中的_buttons.scss）。

替代方案：使用Bootstrap Sass版本（更原生） #

若愿意切换到Sass，无需依赖PostCSS插件，直接用Sass原生的@extend：

1. 安装Sass依赖：npm install sass --save-dev
2. 组件中使用<style lang="scss" scoped>：

<style lang="scss" scoped>
@import 'bootstrap/scss/bootstrap';

.my-btn {
  @extend .btn, .btn-success;
  /* 自定义样式 */
}
</style>

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