web-dev-qa-db-ja.com

create-react-appでcssモジュールを使用するには？

Dan Abramovによる Tweet によると、CSSモジュールのサポートはcreate-react-app（CRA）にあります。この機能を有効にするには、スタイルシートにmodule.cssの拡張子を付ける必要がありますが、これはうまくいきません。 react-scriptsのバージョン1.1.4を使用しています。 CRAでcssモジュールを有効にするにはどうすればよいですか？ありがとう

reactjscreate-react-appcss-modules
23
Muhammad Saqib

取り出す必要はありません。

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>
72
Michael McQuade

アプリで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つのファイルです。ありがとうございました。

5
SachinVsSachin

Create-react-appをイジェクトし、webpackの設定ファイルにこれらの2行を追加する必要があります enter image description here

そして、それを使用するには、CSSをあなたが望まないコンポーネントにロードします（コンポーネントと同じフォルダ内のCSSです）

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

someComponentStyle.css内

.RedDiv {
  /* styles for red div */
}
0
ivica.moke