如何在嵌入式模块中引用Bootstrap Sass，无需编译且不使用@import？

嗨，这个场景我太熟悉了——主站已经全局引入Bootstrap CSS，模块只想用它的Sass工具却不想冗余编译，给你几个可行的方案：

1. 仅导入Bootstrap的Sass工具类文件 #

Bootstrap的Sass源码把变量、混合宏（mixins）、函数这些工具类都拆分成了单独的文件，你完全不需要导入整个Bootstrap包，只挑需要的工具文件导入就行。

假设你已经通过bower install bootstrap安装了Bootstrap，在你的模块Sass文件里这么写：

// 只导入变量、mixins和函数，不会生成任何冗余CSS
@import "../bower_components/bootstrap/scss/_variables.scss";
@import "../bower_components/bootstrap/scss/_mixins.scss";
@import "../bower_components/bootstrap/scss/_functions.scss";

这样你就能在模块里自由使用：

• Mixins：比如@include border-radius(4px)或者@include media-breakpoint-up(md)
• 变量：比如$primary、$border-radius
• 占位符选择器：比如@extend %clearfix（这些占位符不会输出到最终CSS，除非被@extend调用，完美契合你的需求）

2. 配置Sass加载路径简化导入 #

如果觉得每次写完整路径太麻烦，可以在你的Sass编译工具（Webpack、Gulp、Grunt等）里配置加载路径，把Bootstrap的scss目录加入搜索路径。

举个Webpack的例子，在sass-loader的选项中添加：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // ...其他loader
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['bower_components/bootstrap/scss']
              }
            }
          }
        ]
      }
    ]
  }
};

之后你就能用更简洁的写法导入：

@import "_variables";
@import "_mixins";

3. 注意@extend的正确用法 #

要特别注意：你只能@extendBootstrap中的占位符选择器（以%开头的，比如%sr-only、%clearfix），而不能直接extend普通类（比如.btn）。原因很简单——你没有导入Bootstrap的组件类文件，Sass编译器根本不知道.btn这个选择器的存在，直接写会报错。而占位符选择器本身就定义在你导入的工具文件里，完全可以正常使用。

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