CSS模块不适用于React版本16.6.0

Question

我试图在React中使用CSS模块。

这是我的App.js代码

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

const App = () => {
    const REACT_VERSION = React.version;

  return (
    <div>
      Main app
      <div style={styles.test}>Green</div>
      <div>Yellow</div>
      <div>React version: {REACT_VERSION}</div>
    </div>
  );
};

export default App;

这是我的index.css代码

.test {
  background: black;
  color: white;
  font-size: 34px;
  border: 34px;
}

这是输出

我知道我必须修改

• webpack.config.dev.js
• webpack.config.prod.js

但是当我读到这个文章我找不到该代码。

Answer 1

我遇到了同样的问题，并通过将css文件重命名为：

myName.module.css

并像这样导入：

import styles from './myName.module.css'

无需再执行更新Webpack文件的步骤。

Answer 2

另一个问题中的人完全正确，但有一点错误，无需更新配置即可完成。只需将.module您的 css 文件名放在前面：

myName.module.css

然后调用它：

import styles from './myName.module.css'

在 React 16.6 上工作

Answer 3

在 react 16.13 及 react-scripts@2.0.0更高版本中，您不需要弹出您的项目。你的 CSS 文件必须命名为 camelCase + .modules.css 并像这样导入到你的项目中：

import React, { Component } from 'react';
import styles from './app.module.css'; // Import css modules stylesheet as styles
class App extends Component {
  render() {
    return <button className={styles.test}>Error Button</button>;
  }
}
export default App;

并在 app.module.css

.test{
  color: blue;
}

如果您弹出项目，在webpack.config.js文件中，在 css 模块中更改如下：

   test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,

Answer 4

添加类而不是样式，例如

<div className="test">Green</div>