2018年05月05日

ReactでCSS Modulesを試す

すでに、Webpackで動いているReactプロジェクトに導入を前提としています。

まずは関連システムをインストール。

npm install --save-dev style-loader css-loader sass-loader node-sass extract-text-webpack-plugin


webpack.config.jsに会の一文を追加

module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader?modules', 'sass-loader'],
},
]
},


app.scssなどのファイルを作成して、以下のような内容を指定

.base{
background: blue;
}



app.js内でCSSを読み込み


import styles from './app.scss';



<div className={styles.base}>...</div>


などとして指定が可能
タグ:REACT CSS Modules
posted by ねこまんま at 17:34 | Comment(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。