Dan Abramovによる Tweet によると、CSSモジュールのサポートはcreate-react-app(CRA)にあります。この機能を有効にするには、スタイルシートにmodule.css
の拡張子を付ける必要がありますが、これはうまくいきません。 react-scripts
のバージョン1.1.4を使用しています。 CRAでcssモジュールを有効にするにはどうすればよいですか?ありがとう
取り出す必要はありません。
Create-React-Appは、バージョン2の時点ですぐにcssモジュールをサポートします。バージョン2は現在安定しています。
react-scripts@latest
を実行して v2(yarn upgrade react-scripts@latest
) にアップグレードします。
拡張子が.module.css
のファイルを作成するだけです
例えば:
.myStyle {
color: #fff
}
その後、次のように使用できます。
import React from 'react'
import styles from 'mycssmodule.module.css'
export default () => <div className={styles.myStyle}>We are styled!</div>
アプリでCSSモジュールを有効にするために、create-react-appを取り出す必要はありません。 このリンク で説明されているこれらの簡単な手順に従って、プロジェクトでCSSモジュールを使用できます。
ただし、create-react-appをイジェクトした場合、次の名前のファイルを見つける必要があります
「webpack.config.js」
このファイルを開き、行番号でこの{test:cssRegex .... etc}を見つけます。 391そしてこの変更に置き換えます:
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
},
.jsファイルを開き、次のようなステートメントをインポートします
import cssStyleClassName from './MyApp.css';
次に、このimportステートメントを使用すると、次のようなコンポーネントタグの変更を行うことができます
<div className={cssStyleClassName.styleName}></div>
styleNameは、MyAppStyle.cssファイルで定義したものです
.styleName{
your properties here...
}
アプリを取り出した後、ローカルサーバーを再起動する必要があります。変更が反映されない場合があります。
注以前のバージョンでは、プロダクション用とdev用に別々に生成された2つのファイルがありました。現在のバージョンでは、変更を考慮する必要がある「webpack.config.js」ファイルという名前の1つのファイルです。ありがとうございました。