无法在 create-react-app 中使用 css 模块

Posted 2023-03-06

【中文标题】无法在 create-react-app 中使用 css 模块

【英文标题】：Unable to use css module in create-react-app

【发布时间】：2020-09-24 11:14:27

【问题描述】：

首先我使用 npx create-react-app my-app 安装了 react 应用程序。 我还写了npm run eject，弹出它后我发现并不是所有的config.js都安装好了 只有 webpack.config.js 被添加到创建的配置文件中。然后当我像这样编辑 webpack.config.js 时

           
             test: cssRegex,
             exclude: cssModuleRegex,
             use: getStyleLoaders(
               importLoaders: 1,
               sourceMap: isEnvProduction && shouldUseSourceMap,
               module:true,
               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,
               modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
                 localIdentName:'[name]__[local]__[hash:bash64: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,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
                 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,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
                   localIdentName:'[name]__[local]__[hash:base64:5]'
               ,
               'sass-loader'
             ),
           ,

我遇到了一个错误

---

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss! ./src/index.css) ValidationError：无效的选项对象。 CSS Loader 已使用与 API 模式不匹配的选项对象进行初始化。 - 选项具有未知属性“localIdentName”。这些属性是有效的： object url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?

---

【参考方案1】：

您的选项对象与 CSS 加载器选项不匹配，您可以在此处查看 css-loader options

我还假设 CRA 支持开箱即用的模块。无需弹出它并添加其他配置。 Create-React-App CSS modules

只需将 **.modules.css 添加到您的 css（或 sass/scss）文件名中即可。