Wie können CSS-Module Dateien standardmäßig global importieren?

Question

Ich versuche, CSS-Module zu meinem Projekt zu implementieren, das React und Webpack verwendet. Aber ich möchte weiterhin alle globalen CSS verwenden, die ich erstellt habe.

Zum Beispiel zuvor importierte ich css in Reaktion wie diese

import './styles.scss' 

Und dann wird es ein HTML-Element sein, um die Klasse .button verwendet, die ./styles.scss

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

Jetzt innen existiert seit ich will Um CSS-Module zu implementieren, habe ich die css-loader Konfiguration in Webpack wie folgt geändert

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', 
    ] 
    }] 
} 

aber jetzt kann ich nicht die button Klassennamen verwenden, wenn ich wie dieses

import './styles.scss' 

importieren Da die Klassennamen in ./styles.scss basieren alle Hash-Klassennamen wie 32osj-home-button

Grundsätzlich konvertiert, wie konfiguriere ich das CSS-loader CSS-Regel zu laden, wenn ich auf diese Weise importieren

import './styles.scss' 

Aber CSS-Module verwenden, wenn ich auf diese Weise importieren?

import styles from './styles.scss' 

ODER

Gibt es eine Konfiguration zur Verfügung CSS-Module zu setzen alle CSS in :global standardmäßig zu laden, und nur CSS- in :local, wenn ich es geben?

FYI, ich weiß, dass ich 2 loader configs machen kann CSS-Module für CSS-Datei mit dem Namen auf diese Weise

styles.modules.scss 

und gelten normale CSS-loader für Standard namens CSS

styles.scss 

Aber anzuwenden Ich ziehe es vor, dies nicht zu tun, da es nach dem Bündeln von Webpack mehr Dateien erzeugt.

Answer 1

Dies ist mein Setup ... Ich kann tun, was Sie tun möchten.

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

Mit CSS Module ich es auf diese Weise verwenden:

import styles from './styles.scss' 

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

Die importierten Arten ist eine Karte tatsächlich mit [classname] => [hashed_className]

Alles, was Sie in einem setzen: global Block ist nicht auf CSS gehashten Namen

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

ausgeben sollte

0 umgewandelt

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