

views/tweets/index.html.haml に反映させたい _tweets.scss
を、assets/modules/_tweets.scss として置いています。

application.scssは、

[code]

    @import "reset";
    @import "font-awesome-sprockets";
    @import "font-awesome";
    @import "modules/tweets";
    @import "modules/index";
    
[/code]

としていますが、modules/index の scss が haml に反映されてしまっています。

どのようにすれば、上記のように反映させることができるでしょうか？  
拙い文章で申し訳ありませんが、どなたか教えていただけると幸いです。


CC BY-SA 4.0
2020-06-04T09:38:30.373
67283
2021-04-04T01:06:27.200
2021-04-04T01:06:27.200
32986
40478
question
ruby-on-rails haml scss
意図した通り scss が haml に反映されない


後からインポートした `modules/_index.scss` のスタイルが `modules/_tweets.scss`
で設定されたスタイルを上書きしてしまっているので、以下のようにインポートの順序を入れ替えばよいと思います。

[code]

    @import "reset";
    @import "font-awesome-sprockets";
    @import "font-awesome";
    @import "modules/index";
    @import "modules/tweets";
    
[/code]

* * *

以下のようなSCSSを考えます。

[code]

    // style.scss
    @import "tweets";
    @import "index";
    
    // _tweets.scss
    .hoge {
      color: red;
    }
    
    // _index.scss
    .hoge {
        color: blue;
    }
    
[/code]

`style.scss` をCSSに変換すると、以下のようになります（<https://sass.js.org/> で実験してみました）。

[code]

    .hoge {
      color: red;
    }
    
    .hoge {
      color: blue;
    }
    
[/code]

CSSは原則後に書かれたプロパティを優先して適用するので、この場合 `color: blue;` が適用され、`color: red;`
は無視されることになります。


CC BY-SA 4.0
2020-06-05T06:11:25.873
67319
2020-06-05T06:11:25.873
7500
67283
answer