我無法使用自定義 css 覆蓋 rails 中的 bootstrap css

Question

我是 Rails 的新手，當我通過添加添加引導程序的部分時，我正在關注本教程https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1#css_preprocessors

@import "bootstrap-sprockets"
@import "bootstrap"

在application.css.sass最底部，它一切正常。 但是，我有一行代碼

html, body{background:#000;color:#FFF;}

那沒有受到尊重。 環顧四周，我意識到這是因為我的應用程序文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"

我知道由於“引導程序”位於最底部，即網站使用的 css，但是，如果我將其移至頂部或任何其他位置，則會出現錯誤頁面。 是否有另一種方法可以讓我導入引導程序或讓我覆蓋頁面？

Answer 1

我引用https://github.com/rails/sprockets#the-require_self-directive

require_self 指令

require_self告訴 Sprockets在任何后續的 require 指令之前插入當前源文件的正文。

這意味着如果你的 require_self 然后導入引導程序，因為 CSS 代表級聯樣式表，最后一個樣式將始終應用加上css 特殊性規則。 在以下鏈接http://cssspecificity.com/閱讀有關 css 特異性的信息

您可以嘗試設置 !important 來測試問題是否已解決。 另一種方法是按照建議將您的 css 或 scss 代碼包含在單獨的文件中：

*= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"
@import "my-css-style"

如果您仍有疑問，請檢查如何在 localhost:3000/assets/application.css.scss 上加載 application.css.scss 以查看不同的樣式表是如何加載到一個文件中的，然后還可以在 chrome/firefox 上進行調試，禁用所有樣式，直到您確定哪個樣式被覆蓋。