我正在尝试使用 webpacker 和 bootstrap 将我的自定义引导变量应用到 rails 应用程序。
rails new testapp --webpack
cd testapp
yarn add bootstrap
在我的 app/javascript/packs 文件夹中，我有
_custom.scss
应用程序.js
供应商.scss
应用程序.js：
import 'bootstrap'
供应商.scss：
@import 'custom';
@import '~bootstrap/dist/css/bootstrap';
自定义.scss
$brand-success: red !default;
它在引导指南上说您需要在 webpack 配置中配置一些 css 加载器，但是它说 webpacker 默认带有这些加载器。
Bootstrap 运行良好，但无法使用我的自定义变量进行编译。有人有这个使用 webpacker 的例子吗？
Bootstrap 3 使用 less 预处理器，因此您必须使用less-loader。
今天 SASS 被更多地使用，所以很可能你已经在你的 Webpack 配置中使用了sass-loader 。
对我有用的是使用 SASS 版本的 Bootstrap 3。
yarn remove bootstrap
yarn add bootstrap-sass
// Include your variables here, before the import.
@import "~bootstrap-sass/assets/stylesheets/_bootstrap";
我遇到了加载字形图标失败的问题。幸运的是，bootstrap 使用该$icon-font-path变量来定义从何处加载它。
我不得不像这样覆盖它：
$icon-font-path: "../../fonts/bootstrap/" !default;
然后一切正常。
真的很简单，你没有编译引导程序，因为你正在使用它已经编译的 dist css。
更改为这个，它将为包编译
@import '~bootstrap/scss/bootstrap';