Webpack、Sass、およびCSSモジュールを使ってしばらくの間プロジェクトを構築しています。通常、私.scssファイルで、私のようなクラスを定義します。CSSモジュールとWebpackのサス
render =() => {
const styles = require('./MyStyles.scss');
<div className={ styles.button } />
}
、すべてが世界と良いです：
:local(.button) {
color: white;
}
と私のコンポーネントを反応させるのでは、render方法では、私はスタイルが必要です。すべてが期待どおりに機能します。
は今、今日、私はCSS Modules pageを読んセレクタのどれもが、彼らは同じようなスタイルをインポートしたこと:local()私のような、さらにによって包含されなかったことに気づいた。
import styles from './MyStyles.scss';
そして、私はうわーそれははるかに見える」と思いましたそれがインポートされた場所を確認するのは簡単です。:local()を使用しないようにして、デフォルトでローカルにするだけです」だから私はそれを試み、すぐにいくつかの問題に遭遇しました。
1） './MyStyles.scss'からのインポートスタイル。
をインポートする：
私は私のリアクトファイルにESLintを使用しているので、私はすぐに正常に理にかなってデフォルトのエクスポートが、述べられてCSSモジュールのページを持っていない
MyStyles.scssというスローされたエラーを取得しますJSモジュールからのCSSモジュールは、ローカル名からグローバル名へのすべてのマッピングを持つオブジェクトをエクスポートします。
だから私は当然、スタイルシートのデフォルトの書き出しも、それらが参照しているオブジェクトであると予想していました。
2）私は、これはリンティング通過するが、未定義としてbuttonログimport { button } from './MyStyles.scss';
を試みました。
3）requireスタイルをインポートする方法に戻すと、:localで指定されていないものはすべて定義されていません。参考のため
、私のWebPACKのローダー（私もNode-NeatとNode-Bourbon、2素晴らしいライブラリを含むよ）：
{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') }
私の質問は、この次のすべて、以下のとおりです。
1）を使用している場合CSSモジュールをSassで使用する場合は、:localまたは:globalのいずれかに限定しますか？
2）私はwebpackを使用しているので、私はrequire私のスタイルだけことができますか？
'test：/ \。（scss | css）$ /' – zedd45