web-dev-qa-db-ja.com

CSSモジュール：ファイルのローカルスコープを無効にするにはどうすればよいですか？

私は、CSSモジュールを（Webpack cssローダーを使用して）新しいReact=プロジェクトで使用しています。うまく機能しているにもかかわらず、 React Select 動作します。これは、react-selectのJSが認識しないlocal classNamesを作成しようとするためだと思います。 .scssファイル全体をインポートしますが、ローカルではなくグローバルにスコープしますか？

webpackcss-modules
17
Steven

通常、次のような2つのCSSローダーを定義します。

// Global CSS
// We make the assumption that all CSS in node_modules is either
// regular 'global' css or pre-compiled.
loaders.Push({
    test: /\.css$/,
    include: /node_modules/,
    loader: 'style-loader!css-loader'
});

// CSS modules
loaders.Push({
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader?modules'
});

また、過去にアプリをCSSモジュールに移行しましたが、ファイル拡張子に基づいて規則を定義すると便利であることがわかりました。 {filename} .module.css === CSSモジュールvs {filename} .css ===グローバルCSS

// Global CSS
loaders.Push({
    test: /\.css$/,
    exclude: /\.module\.css$/,
    loader: 'style-loader!css-loader'
});

// CSS modules
loaders.Push({
    test: /\.module\.css$/,
    loader: 'style-loader!css-loader?modules'
});
30
riscarrott

Webpack構成でcssローダーを使用する場合、通常、クエリ文字列で_?modules_を有効にしてCSSモジュールをアクティブ化する必要があるため、デフォルトで_:local_スコープをアクティブ化します。これは、変換せずに_.selector { ... }_を宣言したい場合、それを:global(.selector) {}に使用する必要があることを意味します。

SASSローダーを使用しているため、ベンダーのCSSを含める場合は、_@import "~react-select"_を使用してインポートできます。あなたが言った問題は、これがすべてのセレクターをライブラリーからローカルに変換することです。これを避けるために、次のようなセレクタを使用する場合と同じ方法で、インポートを_:global_で囲むことができます：_:global { @import "~react-select"; }_

15
javivelasco

私のために働いている代替ソリューション（スクラッチからgithubの問題まで）は次のとおりです：

Webpack2の構成（関連セクション）

    {
        test: /\.css$/,
        use: [{
            loader: 'style-loader',
        }, {
            loader: 'css-loader',
            options: {
                modules: true,
            },
        }, {
            loader: 'postcss-loader',
        }],
    }

moduleX.js

例としてslick-carouselを使用します。

// Import the libraries css without the module gear being applied
//
import '!style-loader!css-loader!slick-carousel/slick/slick.css';

// Import my applications css. `styles` will be the typical 
// `slide_foo_xeh54` style set of module exports 
// (depending how you have your css-loader 
// configured
//
import styles from './Slides.css';

言い換えると、異なるローダー（！x！y）で具体的にインポートする場合を除き、すべてがcss-loaderのwebpack configファイルで設定されたオプションに従います。

多数の例外/グローバルがある場合、受け入れられたソリューションの方が良いかもしれません。

5
Chris