webpacker v4.0.2 で確認しています。 config/webpack/environment.js const { environment } = require('@rails/webpacker') // 追加 environment.loaders.get('sass').use.find(u => u.loader === 'sass-loader'). options.indentedSyntax = true module.e…

追記(2022/1/26): husky v7.0.4 と lint-staged v12.3.1 で動くように修正しました。 昨日の記事 の続きです。 sass-lint -v を手動で実行するのは大変なので、git commit 時に自動実行するようにします。 必要なツールのインストール。 yarn add lint-stage…

CSS は、Sass (*.sass) で書いているのですが、プロパティの順番をアルファベット順にしたくて sass-lint を導入してみました。 インストール npm install -g sass-lint .sass-lint.yml。便利そうな設定もいくつか追加。 必要最低限の設定にしたいので、merg…

@mixin sp-view @media only screen and (max-width: 767px) @content こういう mixin をつくっておくと、 .hoge @include sp-view text-align: center で、 @media only screen and (max-width: 767px) { .hoge { text-align: center; } } みたいに展開され…