Webpackのcss-loaderの使い方を確認して各コンポーネントごとにCSSファイルを読みこませる方法について確認できました。
でもせっかくなので、ただのCSSではなくSassをつかった開発をできるようにしたいので、その方法についても確認してみました。css-loaderがあるのでscss-loaderとかあるかなと検索してみると参考になるサイトがいろいろみつかりました。
次のコマンドでsass-loaderをインストールします。css-loaderとstyle-loaderも一緒にインストールしておいた方がいいみたいです。
$ npm install css-loader style-loader sass-loader --save-dev
webpack.config.jsには次のように記載します。
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
あとはこんな風にscssファイルを用意して
『require("./PageHeader.scss");』という感じで読み込みします。
これでコンポーネント毎にSassをつかってスタイルを適用できるようになりました。
