create-react-app中css module无效的解决办法

html-css08

create-react-app中css module无效的解决办法,第1张

转自： https://blog.csdn.net/zgd826237710/article/details/86478748本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式 编写一个 css 文件：Button.module.css 编写一个普通的 css 文件：another-stylesheet.css 在 js 文件中使用 CSS Modules 的方式进行引用：Button.js 此时 Button 组件的背景颜色是红色，但是字体颜色却不是红色，因为使用了 Css Modules 之后，普通的 css 样式就不起效果了，需要用全局的方式编写才可以(:global)。 使用命令： 运行完成之后，打开 config 目录下的 webpack.config.js 文件，找到 test: cssRegex 这一行，在 use 属性执行的方法中添加 modules: true，如下： 该方法同样需要引入，只是名字不需要是.module.css了。

排查下为何未生效，以下是css无效的常见原因：

一、div 标签未关闭

这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签，诊断时就像大海捞针一样麻烦。

二、不当的DOCTYPE声明

不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。

三、结尾斜线

如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。

在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

四、JavaScript

如果已经声明Strict DOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。

五、不良嵌套

嵌套就是元素里又包括元素，我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

如果仍无法发现，建议用“开发者模式”/“调试模式”（F12打开）查看对应元素继承了哪些属性，是不是其他的样式覆盖了自己设置的样式。

npm install babel-plugin-css-modules-transform -D

根目录添加一个.babelrc的文件，写入：

{

    "plugins": ["css-modules-transform"]

}

layout.js

import CustomCss from './a.css'

<div className='CoustomCss.hahaha'>

111111

</div>

a.css

.hahaha { background-color: red }