如何在 Rails 5.1 中覆盖节点 Bootstrap 样式？

Question

当使用 "new" Rails 5.1 Yarn 和 Webpack 范例时：如果我包含 bootstrap 使用 Yarn（不使用 gem）如下：

yarn add jquery
yarn add bootstrap

然后与 application.js 的:

*= require bootstrap/dist/css/bootstrap

一切似乎都运行良好...除了重写 bootstrap 样式。

现在 正确的 方法是什么来覆盖 bootstrap 提供的样式（例如来自 /bootstrap/less/scaffolding.less 的主体样式）

任何放在 /app/assets/stylesheets 中的 .css 文件中的任何内容，例如 before_bootstrap.css:

body {
  background-color: #333;
}

被 scaffolding.less 中的样式覆盖，无论您是否需要 css 文件在之前或在 application.css 行之后：

  *= require_tree .
  *= require_self
  *= require before_bootstrap
  *= require bootstrap/dist/css/bootstrap
  *= require after_bootstrap

旧的方式，我想，应该是使用bootstrap_and_overrides.css文件和@import ???但我看不出它如何与 node/webpack 范式一起工作。

Answer 1

好的，我有这个工作，这是我所做的：

将我的 sass 文件（变量、bootswatch 文件和一些全局变量）添加到 /app/javascripts 根文件夹
创建了一个 packs/app 包文件夹作为我的项目基础包

在该包文件夹中：

创建 index.js 我的导入语句所在的位置
已创建 styles.scss，其中 sass 个导入语句是

我的 styles.scss 开头为：

@import "../../variables.scss";

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

@import "../../bootswatch.scss";
@import "../../utils.scss";

效果很好，加载基础 bootstrap，然后是 bootswatch，变量保持不变。

随着项目的进展，如果特定功能需要，我会创建新的包文件夹，虽然这是一个非常纯粹的 "rails" 应用程序，所以我们会看到它的增长。

如何在 Rails 5.1 中覆盖节点 Bootstrap 样式？

How to Override Node Bootstrap styles in Rails 5.1?

twitter-bootstrap

webpack

ruby-on-rails-5

yarnpkg