読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

React:Webpackのscss-loaderを試してみました

React Webpack

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'] },

f:id:tyoshikawa1106:20160525144233p:plain


あとはこんな風にscssファイルを用意して
f:id:tyoshikawa1106:20160525144445p:plain


『require("./PageHeader.scss");』という感じで読み込みします。
f:id:tyoshikawa1106:20160525144528p:plain


これでコンポーネント毎にSassをつかってスタイルを適用できるようになりました。
f:id:tyoshikawa1106:20160525144617p:plain