web-dev-qa-db-ja.com

CSSモジュールとWebpackを使用したSass

私はしばらくの間、Webpack、Sass、およびCSSモジュールを使用してプロジェクトを構築してきました。通常、_.scss_ファイルでは、次のようなクラスを定義します。

_:local(.button) {
    color: white;
}
_

そして、私のReactコンポーネント、renderメソッドでは、スタイルが必要です：

_render = () => {
    const styles = require('./MyStyles.scss');
    <div className={ styles.button } />
}
_

そして、すべてが世界に適しています。すべてが期待どおりに機能します。

今日、私は CSS Modulesページ を読んでいて、セレクターのどれも私のような:local()に含まれておらず、さらに以下のようなスタイルをインポートしていることに気付きました。

_import styles from './MyStyles.scss';
_

そして、「すごいよね、インポートされた場所を見るのがもっと簡単だと思った。そして:local()を使わずに、デフォルトでローカルのものだけを持ちたい」だから私はそれを試してみて、すぐにいくつかの問題にぶつかりました。

1）「 './MyStyles.scss」からスタイルをインポートします。

ReactファイルでESLintを使用しているため、_MyStyles.scss_には通常意味のあるデフォルトのエクスポートがありませんが、CSSモジュールのページには記載されているというエラーがすぐに表示されます：

CSSモジュールをJSモジュールからインポートする場合、ローカル名からグローバル名へのすべてのマッピングでオブジェクトをエクスポートします。

ですから、当然、スタイルシートのデフォルトのエクスポートが、それらが参照しているオブジェクトであると期待していました。

2）_import { button } from './MyStyles.scss';_を試しました

これはリンティングをパスしますが、buttonは未定義としてログに記録します。

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）SassでCSSモジュールを使用する場合、_:local_または_:global_の使用に限定されますか？

2）私はwebpackを使用しているので、それは私のスタイルをrequireしかできないという意味ですか？

cssreactjssasswebpackcss-modules
42
barndog

投稿してすぐに、解決策を見つけました。私が非常に混乱していると思った問題は、Webpackの設定にありました。当初、私のローダーは次のように見えました。

_loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap
_

これにより、1）require my Sass、2）_:local_でスタイルをラップできました。

ただし、CSSローダーにはmodulesオプションがなかったため、次のようになりました。

_loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap
_

これで、自分のスタイルをimportでき、_:local_でラップする必要はありません（必要に応じてまだ可能だと思いますが）。

これについて最も興味深いと思うのは、modulesオプションがなくても、CSSモジュールのような機能を使用できることです。

編集：

私が気づいたのは、この答えを見た人への将来の警告です。あなたが eslint-plugin-import を使用してjavascriptコードのインポートをリントすると、スタイルのインポート時にエラーがスローされますのような：

_import styles from './MyStyles.scss';
_

cSSモジュールが結果のスタイルオブジェクトをエクスポートする方法のため。つまり、require('./MyStyles.scss')を実行して警告やエラーをバイパスする必要があります。

44
barndog