materializeのcssの上書き方法

Question

rails6で gem materialize-sass, '~> 1.0.0を使用しています。
色々な記事を読むと以下のように上書きができると書かれています。

# example.html.erb
<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

# example.scss
.breadcrumb {
  @extend .breadcrumb;
  font-size: 12px;
}

.breadcrumb はmaterializeで定義されているクラスになります。
font-size: 12px !important; でも元の.breadcrumbのスタイルが当たっています。

app/assets/stylesheets/application.scss

/*
 * 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, 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 material_icons
*/
@import "materialize";

application.scssと同階層にexample.scss が存在します。
webpackでコンパイルしています。
example.scss の他のスタイル(独自で作ったクラスなど)は反映されています。
ただ、以下のようにexample-class にスタイルを当てて上書きしようとしても、
breadcrumb クラスが優先されている状態です。

<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="example-class breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

どなたかわかる方いたら教えてください。

Comments

[maisumakun]

example.scssはどのような形で読み込んでいますか？

[m.ts10806]

もっと明らかに変化がわかる指定をされた方が良いと思います。文字サイズももっと大きくしたり、色を変えたり

[m.ts10806]

コンパイル結果のCSS提示された方が良いかと思います。

あと、exampleのcssはmaterializeのcssよりあとに読み込ませてますよね？

[maisumakun]

> あと、exampleのcssはmaterializeのcssよりあとに読み込ませてますよね？

自分の回答にありますが、コメント内のrequire_tree .がsprocketsでexample.scssなどの読み込みに置き換えられますので、そっちが先に来てしまっています。

[smty]

m.ts10806さん、maisumakunさん、ありがとうございました。

Answer 1

*= require_tree .
*= require_self
*= require material_icons
*/
@import "materialize";

CSSは後から書いたほうが反映されますので、同じ詳細度のセレクタで仕掛けていると、後から書かれた@import "materialize";の中身のほうが優先されてしまいます。

@import "materialize";を先頭に回しましょう。