質問編集履歴

1

追記しました。

2020/01/15 01:24

投稿

smty
smty

スコア33

test CHANGED
File without changes
test CHANGED
@@ -46,4 +46,78 @@
46
46
 
47
47
 
48
48
 
49
+ app/assets/stylesheets/application.scss
50
+
51
+ ```
52
+
53
+ /*
54
+
55
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
56
+
57
+ * listed below.
58
+
59
+ *
60
+
61
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
62
+
63
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
64
+
65
+ *
66
+
67
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
68
+
69
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
70
+
71
+ * files in this directory. Styles in this file should be added after the last require_* statement.
72
+
73
+ * It is generally better to create a new file per style scope.
74
+
75
+ *
76
+
77
+ *= require_tree .
78
+
79
+ *= require_self
80
+
81
+ *= require material_icons
82
+
83
+ */
84
+
85
+ @import "materialize";
86
+
87
+ ```
88
+
89
+ application.scssと同階層に`example.scss` が存在します。
90
+
91
+ webpackでコンパイルしています。
92
+
93
+ `example.scss` の他のスタイル(独自で作ったクラスなど)は反映されています。
94
+
95
+ ただ、以下のように`example-class ` にスタイルを当てて上書きしようとしても、
96
+
97
+ `breadcrumb` クラスが優先されている状態です。
98
+
99
+ ```
100
+
101
+ <nav>
102
+
103
+ <div class="nav-wrapper">
104
+
105
+ <div class="col s12">
106
+
107
+ <a href="#!" class="example-class breadcrumb">First</a>
108
+
109
+ <a href="#!" class="breadcrumb">Second</a>
110
+
111
+ <a href="#!" class="breadcrumb">Third</a>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </nav>
118
+
119
+ ```
120
+
121
+
122
+
49
123
  どなたかわかる方いたら教えてください。