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

Question

当使用 Yarn 和 Webpack 的“新”Rails 5.1 范式时：如果我使用 Yarn 包含引导程序（不使用 gem），如下所示：

yarn add jquery
yarn add bootstrap

然后用application.js的：

*= require bootstrap/dist/css/bootstrap

一切似乎都很好......除了覆盖引导样式。

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

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

body {
  background-color: #333;
}

被scaffolding.less 中的样式覆盖，不管你是需要那个css文件之前还是之后 em> application.css 行：

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

我想，old 方法应该是使用 bootstrap_and_overrides.css 文件和 @import ???，但我不明白它是如何工作的节点/webpack 范例。

Answer 1

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

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

在那个包文件夹中：

1. 在我的导入语句所在的位置创建 index.js
2. 在 sass 导入语句所在的位置创建 styles.scss

我的 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";

这很好用，加载基本引导程序，然后是引导表和变量棒。

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