少し古いReactでSASSを使いたかったのですが、node-sassが非推奨らしいのでdart-sassを使うことにしました。
参考
Sass: Syntactically Awesome Style Sheets
Syntactically Awesome Style Sheets
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzIxMDAlMkZwcm9maWxlLWltYWdlcyUyRjE0OTY5NzQ1ODA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZmU1MmY0MzhhMTdmY2RjZTgyOTQxMTA3ZjJmYjE5NGU%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkY3N2ZlMGJjMTQ1ODkyNjY0ZDMwN2U2M2RjZmJjN2EzODEzNDVjYTQ3JTJGb3JpZ2luYWwuanBnJTNGMTUzOTE2MTE0OD9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZib3JkZXI9MiUyQ0ZGRkZGRiZmbT1wbmczMiZzPTkyZTg0NTE1MTA5YjFjMDk4ODRhZWM1NzBkOGQyYzYz%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D8f4010d29a135c383338e5797522503d?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9c2Fzcy1sb2FkZXIlMjAlRTMlODElQTclMjBkYXJ0LXNhc3MlMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz04YzFkYmZkN2YyZDk1NmZmN2NiMzI4NzBhMjI5OTIzMw&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDAweDUwJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MGViNDIyNTcyZjJiNDkzMDgzMzc5ZmVlYWQ0OWI1NzM&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=5qCq5byP5Lya56S-44OH44Kj44O844O744Ko44OM44O744Ko44O8&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=390e679d5d735f4c1616b8567273f6b2)
sass-loader で dart-sass を使う - Qiita
モチベーションnode-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使っ…
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjUxMyUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MTYwMz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz0xZGZjYWMyZjk4NGY5NGFmZTViMDFiYTQ2YmFkZDQzNA%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D96147e590d0cdc102b565d5e638800a6?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9VnVlJTIwJTJCJTIwZGFydC1zYXNzJTIwJTJCJTIwV2VicGFjayUyMCVFMyU4MSVBN0NTUyVFMyU4MyVBMiVFMyU4MiVCOCVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSU4NiVFMyU4MSU5RiVFMyU4MiU4MSVFOCVBOCVBRCVFNSVBRSU5QSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTE5YWYzNDViNDRiYTE2NzRiOWNlYmVjNTY4YTMyNDQw&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzeWduYXMmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0xYjYxNGU4NDQ2NmMyM2JlYTU5MTJkNTcxODRjMWQyZQ&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=37693bb9cd8bab8df1e6bc5851af19b5)
Vue + dart-sass + Webpack でCSSモジュールを使うため設定 - Qiita
アップデート2021.12.11fibersが非推奨になったので該当箇所消しました。2021.3.7現在、cssModulesがここに書いた設定だと使えなくなっています。やり方がわかりました…
やったこと
SASSと関連パッケージのインストール
package.jsonがある場所で下記コマンドを打ちます。
npm install --save-dev fibers sass sass-loader
sass: dart-sassのnpmのパッケージ名がsassらしい
fibers: dart-sassのcssへのコンパイル速度が上がるらしい
sass-loader: sassを読み込むために使うらしい
webpackの設定
webpack.config.jsの設定
module: { rules: [ /* 省略 */ { test: /\.scss$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader', // css Modules を使うために必要な設定 modules: true, }, { loader: 'sass-loader', // dart-sass を使うのに必要な設定 implementation: require('sass'), sassOptions: { fiber: require('fibers'), }, }] } /* 省略 */ ] }
clientでの書き方
.scssファイル側
.App{ text-align: center; .red{ color: red; } }
Component側
import React from 'react'; import style from './App.scss';/* scssをそのまま読み込む */ function App() { return ( /* {}でくくってクラス名を設定(CSS Moduleの効果でブラウザではユニークなクラス名になる) */ <div className={style.App}> <span className={style.red}>nanika</span> </div> ); } export default App;
おわり。