CSSモジュールがデフォルトでファイルをグローバルにインポートする方法を教えてください。

Question

ReactとWebpackを使用している私のプロジェクトにCSSモジュールを実装しようとしています。しかし、私は作成したすべてのグローバルなCSSを使い続けたいと思っています。以前、私は今、私がしたいので、この

import './styles.scss' 

のように反応し、その後、./styles.scss

<button className='button'>Click me</button> 

内に存在するクラス.buttonを使用して、HTML要素があるだろうに、CSSを輸入例えば

、 CSSモジュールを実装するために、このようなwebpackのcss-loader設定を変更しました

module: { 
    rules: [{ 
    test: /\.s?css$/, 
    use: [ 
     'style-loader', 
     { 
     loader: 'css-loader', 
     options: { 
      // This is where I added the config for css modules 
      modules: true, 
      localIdentName: '[hash:base32:5]-[name]-[local]', 
      importLoaders: 2, 
     } 
     }, 
     { 
     loader: 'postcss-loader', 
     options: { 
      config: { 
      path: './postcss.config.js', 
      }, 
     }, 
     }, 
     'sass-loader', 
    ] 
    }] 
} 

私はこの

import './styles.scss' 

のようにインポートするときに./styles.scssでのクラス名は、すべての基本的

32osj-home-buttonようにするために、ハッシュベースのクラス名を変換しているので

は、しかし、今私はbuttonクラス名を使用することはできません、どのように私は設定しますこのようにインポートするとCSSを正常に読み込むCSSローダー

import './styles.scss' 

しかし、このようにインポートするとCSSモジュールが使用されますか？

import styles from './styles.scss' 

OR

私はそれを指定したとき:localにすべてデフォルトで:globalで、CSS、および負荷だけCSSをロードするためにCSSのモジュールを設定するために利用可能な任意の構成はありますか？

ちなみに、私は、私はこのよう

styles.modules.scss 

という名前のCSSファイルのCSSモジュールを適用するために2つのローダのconfigsを作成し、defaultという名前のCSS

styles.scss 

のために、通常のCSS-ローダーを適用することができます知っているが、私は、Webpackをバンドルした後に、より多くのファイルを作成するので、そうしたくはありません。

Answer 1

これは私の設定です...あなたがしたいことをやり遂げることができます。私はそれをこのように使用するCSSモジュールと

module: { 
    rules: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
     }, 

     { 
      test: /\.scss$/, 
      loader: ExtractPlugin.extract(['css-loader', 'sass-loader']), 
     }, 
     { 
      test: /\.css$/, 
      exclude: [/\.global\./, /node_modules/], 
      loader: ExtractPlugin.extract(
       { 
        fallback: 'style-loader', 
        use: [ 
         { 
          loader: 'css-loader', 
          options: { 
           importLoaders: 1, 
           modules: true, 
           autoprefixer: true, 
           minimize: true, 
           localIdentName: '[name]__[local]___[hash:base64:5]' 
          } 
         } 
        ] 
       }) 
     }, 
     { 
      test: /\.css/, 
      include: [/\.global\./, /node_modules/], 
      loader: ExtractPlugin.extract(
       { 
        fallback: 'style-loader', 
        use: ['css-loader'] 
       }) 
     }, 
     { 
      test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/, 
      use: [ 
       { 
        loader: 'url-loader', 
        options: { 
         limit: 10000, 
         name: 'font/[name].[ext]', 
        }, 
       }, 
      ], 
     }, 
     { 
      test: /\.(jpg|jpeg|gif|png|tiff|svg)$/, 
      exclude: /\.glyph.svg/, 
      use: [ 
       { 
        loader: 'url-loader', 
        options: { 
         limit: 6000, 
         name: 'image/[name].[ext]', 
        }, 
       }, 
      ], 
     }, 
     { 
      test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/, 
      exclude: /\.glyph.svg/, 
      use: [ 
       { 
        loader: 'file-loader', 
        options: { name: 'audio/[name].[ext]' }, 
       }, 
      ], 
     }, 

Answer 2

：グローバル：

import styles from './styles.scss' 

<button className={styles.button}>Click me</button> 

輸入のスタイルあなたがに入れて、[クラス名] => [hashed_className]

すべてと実際のマップですブロックは、CSSに変換されていない

:global { 
    .button { 
     color: #FF0000; 
    } 
} 
.button { 
    color: #000000; 
} 

名をハッシュ化された出力すべき

.button { 
    color: #FF0000; 
} 
.32osj-home-button { 
    color: #000000; 
}