我正在尝试使用WebPacker和Bootstrap将自定义的引导变量应用于Rails应用。
rails new testapp --webpack
cd testapp
yarn add bootstrap
在我的app/javascript/packs文件夹中，我有
-
_custom.scss
-
application.js
-
vendor.scss
application.js：
import 'bootstrap'
vendor.scss：
@import 'custom';
@import '~bootstrap/dist/css/bootstrap';
custom.scss
$brand-success: red !default;
它在"自举"指南上说您需要在WebPack配置中配置某些CSS加载程序
Bootstrap工作正常，但是它不会与我的自定义变量进行编译。有人有一个与WebPacker一起使用的例子吗？
真的很简单，您没有编译引导程序，因为您正在使用它已经编译的css。
对此进行更改，并将用于包装
@import '~bootstrap/scss/bootstrap';
bootstrap 3
Bootstrap 3使用较少的预处理器，因此您必须使用较少的负载器。
今天的SASS更加使用，因此您很可能已经在WebPack配置中使用了SASS-LOADER。
对我来说效果很好的是使用Bootstrap 3的SASS版本。
- 第一步是删除Bootstrap软件包：
yarn remove bootstrap
- 现在安装Bootstrap-sass软件包(它将Bootstrap版本3.3.6发行(：
yarn add bootstrap-sass
- 从您的sass/scss文件导入：
// Include your variables here, before the import.
@import "~bootstrap-sass/assets/stylesheets/_bootstrap";
如果它未能加载草甘膦
我遇到了一个问题，即加载玻莱维子失败了。幸运的是Bootstrap使用$icon-font-path变量来定义从哪里加载它。
我必须像这样覆盖它：
$icon-font-path: "../../fonts/bootstrap/" !default;
然后所有负载均处于罚款。