Reactjs css modułowy

Question

Hej,

Chciałbym zastosować w Reacths css modułowe. 

O ile zwykłe arkusze działają, to modułowe już nie. Terminal nie wyrzuca błędów.

Plik webpack.config.js :

module.exports = {
    entry: './src',
    output: {
      path: 'build',
      filename: 'bundle.js',
    },  
  module: {
    rules: [
      {
          test: /\.css$/,
          use: [
              { loader: 'style-loader' },
              {
                  loader: 'css-loader',
                  options: {
                      importLoaders: 1,
                      modules: true,
                      localIdentName: '[name]__[local]__[hash:base64:5]'
                  }
              }
          ]
      }
  ]
  }
};

 

Index.js:

import React from 'react';
import Header from '../Header';
import styles from '../Header/styles.css';

const App = () => (
    <div>
      <Header />
      <h2 className={styles.test}>Test</h2>
    </div>
  );
  
  export default App;

 

Appka utworzona za pomocą 

create-react-app my-app

 

Ktoś się z tym spotkał?

Dzięki.

Comments

Co to 

create-react-app my-app

Czemu nie odpakasz po prostu webpack ?

---

To tworzy aplikację React. Czemu tak? Tak jest w Docs na stronie React.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

 

Lepiej jest przez webpacka?

Answer 1

Dodam jeszcze, że przy takiej deklaracji działa:

:local(.test) {
    background: blue;
}

 

Kiedyś pisałem na przygotowanej konfiguracji i pamiętam, że nie musiałem używać klas w ten sposób. Czy to coś nowego?