Question

当使用“新”Rails 5.1范例纱线＆amp; Webpack：如果我使用Yarn（不使用gem）包含bootstrap，如下所示：

yarn add jquery
yarn add bootstrap

然后使用application.js：

*= require bootstrap/dist/css/bootstrap

一切似乎都很有效......除了重写引导风格。

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

将任何内容放入 / app / assets / stylesheets 中的.css文件中，例如before_bootstrap.css：

body {
  background-color: #333;
}

被scaffolding.less中的样式覆盖，无论之前或 em> 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 pack文件夹作为我的项目基础包

在该包文件夹中：

创建了我的导入语句为

index.js

创建styles.scss，其中sass import语句为

我的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样式？

1 个答案: