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

但是当我阅读this文章时，我找不到该代码。

Answer 1

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

myName.module.css

并也这样导入：

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

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

Answer 2

在反应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 3

我认为它一定会对您有所帮助。打开config / webpack.config.js并找到这样的块。

        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 1,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'css-loader'
          ),
         sideEffects: true,
        },

并像这样更改：

        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
              getLocalIdent: getCSSModuleLocalIdent,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }

          }),
          sideEffects: true,
        },

在上面的代码块之后立即对cssModuleRegex代码块执行相同的操作，然后重新启动服务器，您将启用css模块。

Answer 4

另一个问题的人完全是严厉的，但是有一个小错误，无需更新配置就可以做到。只需将.module放在您的css文件名之前，就像这样：

myName.module.css

然后称呼它：

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

使用React 16.6

Answer 5

我不知道您是否找到解决方案，但这对我有用。我正在遵循使用CSS模块的教程，但导师的react版本与我的不同。他的反应是16.0.0，我的反应是16.7.0。我在webpack上没有dev或prod版本。我只有webpack.config.js。所以我做了，我在第400行有一个代码

{
     test: cssRegex,  // cssRegex defined above as /\.css$/; 
     exclude: cssModuleRegex,
     use: getStyleLoaders({
          importLoaders: 1,
          sourceMap: isEnvProduction && shouldUseSourceMap,

          //this is the code tutor wrote.
         //================================================
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[name]__[local]__[hash:base64:5]'
          //================================================


     }),
     // Don't consider CSS imports dead code even if the
     // containing package claims to have no side effects.
     // Remove this when webpack adds a warning or an error for this.
     // See https://github.com/webpack/webpack/issues/6571
     sideEffects: true,
},

我希望它会有所帮助。

注意：我写的唯一一句话是我在区块中提到的内容，其他所有内容都已经存在。

Answer 6

我认为这对您有用。

我的反应版本是16.8.2，在16.2.0之后，您没有 config / webpack.config.dev.js 或 网页上的config / webpack.config.prod.js 版本。

在React应用中弹出操作后，您只有 config / webpack.config.js 和 config / webpackDevServer.config.js 文件，请解决此问题发出打开的 config / webpack.config.js 文件并更新这些更改。 （请参见第391-464行）

        {
      test: cssRegex,
      exclude: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,

        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[name]__[local]__[hash:base64:5]'
      }),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
    },
    // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
    // using the extension .module.css
    {
      test: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[name]__[local]__[hash:base64:5]'
      }),
    },
    // Opt-in support for SASS (using .scss or .sass extensions).
    // By default we support SASS Modules with the
    // extensions .module.scss or .module.sass
    {
      test: sassRegex,
      exclude: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[name]__[local]__[hash:base64:5]'
        },
        'sass-loader'
      ),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
    },
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
      test: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        },
        'sass-loader'
      ),
    },

Answer 7

您的CSS文件的名称必须类似于“ yourFileName.module.css ”。并导入到您的JS文件中，如下所示：从“ ./ yourFileName.module.css ”;

中导入 yourVariableName

在React版本上工作正常：

"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.0"

Answer 8

添加类而不是样式

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

Answer 9

如果您使用CSS类或ID，则无需使用import CSS作为变量。

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

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

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

    export default App;

或

import React from 'react';
const style ={
  background: black,
  color: white,
  fontSize: 34px,
  border: 34px
}

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

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

Answer 10

这取决于您所知道的React版本。最新版本要求您按以下方式命名CSS和sass文件：

cython.int

如果重命名文件不起作用。您应该手动启用它。如果您确实使用react-create-app创建了项目，但没有弹出该项目以访问所有配置文件。请按照以下步骤操作：

[name].moudle.css or [name].moudule.scss.

它将创建一个配置文件夹。在该配置文件中，打开您的webpack.config文件（应该有两个）您必须在测试中添加：/.css$/选项：

npm run eject

它应该看起来像这样

modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'

在两个webpack.config文件中完成

注意：除非您知道自己在做什么，否则请注意在此处进行其他调整

Answer 11

您必须以这种方式创建项目：

create-react-app projectname --scripts-version 1.1.5

应用：
```
npm run eject
```
将CSS加载程序加载到webpack.config.prod.js和webpack.config.dev.js文件中。有必要为选项添加以下设置。否则，反应CSS模块的结构将无法正常工作。
```
{
   loader: require.resolve('css-loader'),
       options: {
          importLoaders: 1,
          modules: true,
          localIdentName:'[name]__[local]__[hash:base64:5]'
}
```

Answer 12

在css文件名中添加.module可以在更高版本的React中启用css加载器。发布此操作后，您可以在邮件文件中简单地使用 className = {styles.classname（来自CSS文件）} 。这会将特定的class属性应用于该HTML元素。

文件顶部的“刚刚导入” 从'./mystyle.module.css'导入样式

它将起作用。.

Answer 13

* as 解决了我的问题。

import * as headerStyles from './header.module.scss'

Answer 14

使用 React 17.0.1 进行检查

这是你需要做的：

重命名您的 css 文件，从：'index.css' 到：'index.module.css'。该 css 文件（现在作为 *.module.css 文件）的命名符号无关紧要。如果是 'myFile.module.css' 或 'MyFile.module.css' 不会有任何区别。解决方案并不准确。
从您的 js 文件中导入您的 *.module.css：

从'./CourseGoalList.module.css'导入样式；
使用通常的 CSS 模块语法访问您的 css 类：

... className={style.NameOfTheCssClass}...
如果你有带破折号的 css 类，你可以做两件事。删除破折号，将它们重命名为 UpperCase 或 camelCase，或者您可以像访问 Map 对象（使用键：值对）一样访问它们。即使您能够从您的 JS 文件中访问/查看这些类（在您的 IDE 中使用通常的自动完成代码功能），作为camelCase 类，...它们仍然不会以这种方式工作（使用.js 文件上的驼峰命名法，与 css 文件中的完全一样）。必须将 css 类名称更改为大写或驼峰（从 *.js 文件中使用大写或驼峰符号访问）或保持原样，然后像访问它们一样访问它们地图对象。

示例：您可以执行以下两种操作之一：

变体 A：完美运行

JS 文件：

import React from 'react';
import CourseGoalItem from '../CourseGoalItem/CourseGoalItem';
import style from './CourseGoalList.module.css';

const CourseGoalList = props => {
  return (
    <ul className={style.GoalList}>
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

export default CourseGoalList;

CSS 文件：

.GoalList {
  list-style: none;
  margin: 0;
  padding: 0;
}

或：

变体 B：完美运行

JS 文件：

import React from 'react';
import CourseGoalItem from '../CourseGoalItem/CourseGoalItem';
import style from './CourseGoalList.module.css';

const CourseGoalList = props => {
  return (
    <ul className={style['goal-list']}>
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

export default CourseGoalList;

CSS 文件：

.goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

但这行不通：

变体 C：它不起作用（即使使用良好的 IDE（例如 WebStorm）从您的 js 文件中“可见”css 类）< /p>

JS 文件：

import React from 'react';
import CourseGoalItem from '../CourseGoalItem/CourseGoalItem';
import style from './CourseGoalList.module.css';

const CourseGoalList = props => {
  return (
    <ul className={style.goalList}>
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

export default CourseGoalList;

CSS 文件：

.goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

Answer 15

将css文件名更改为“ myfile.module.css”，然后将其导入“从'./myfile.module.css导入样式”解决了我的问题。即使我不知道为什么必须使用文件名中的模块。

CSS模块不适用于React版本16.6.0

15 个答案: