开发者学堂课程【React 入门与实战：为普通样式表通过 modules 参数启用模块化】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8112
为普通样式表通过 modules 参数启用模块化
目录
一、 为普通样式表通过 modules 参数启用模块化
二、解决 css 样式表作用域冲突问题的方法
三、总结
一、 为普通样式表通过 modules 参数启用模块化
示例代码：
//普通样式表在默认情况下，没有作用域的概念，无论在组件A或者是组件B中导入的样式表，默认的都是属于全局
import React from ’react’//导入列表组件需要的样式表//问题:这个样式表，是只在List 组件中生效嘛?
//经过实验,发现，直接导入 css 样式表，默认是在全局上，整个项目都生效的！
//思考：Vue 组件中的样式表，有没有 冲突的问题？？？
//答案：Vue 组件中的样式表，也有冲突的问题；但是，可以使用<style scoped></style>\
//疑问： Rect 中， 有没有类似于 scoped 这样的指令呢？
//答案： 没有，因为在 Rect 中，根本就没有指令的概念； //Rect 中可以通过 css 样式表，启用模块化
import cssobj from’@/css/cmtlist.css’
//启用模块化的表现是在导入普通样式表的时候接收的不是空对象，而是一个有具体属性的对象
//类名不再是 title1，而是后面自动生成的类名 console.log(cssobj);//导入评论项组件import CmtIfemfrom ’@/components/CmtIten2’export default class CmtList extends React.Component {constructor() {
super()
this.state = {
CommentList: [//评论列表数据{ id: 1，user: ‘张三, content:‘哈哈，沙发’}，
{ id: 2,user:‘李四,content:‘哈哈，板凳’},
{ id: 3， user: 王五, content:‘哈哈，凉席’}，
{ id: 4, user: 赵六, content:‘哈哈，砖头’}，
{ id: 5, user: ‘田七’, content: ‘哈哈，楼下山炮’}
]
)
import React from 'react'
import cssobj from '@/css/cmtlist.css'console.log(cssobj);
export default function
CmtItem(props){
return <div>
<h1 id={cssobj.cmtTitle}>评论人: {props.user}</h1>
<p>评论内容: {props.content}</p>
</div>
}
.title{
color: red;}
/* css 模块化，只针对类选择器和 Id 选择器生效*//* CSS 模块化不会将标签选择器模块化*/
/* h1{
font-style: italic;}*/
cmtTitle{
font-size: 14px;
import React from 'react'
import cssobj from '@/css/cmtitem,css'
console.log(cssobj);
export default function CmtItem(props) {return <div>
<h1 id={cssobj.cmtTitle}>评论人: {props.user}</h1><p>评论内容: {props.content}</p>
</ div>
}
二、解决 css 样式表作用域冲突问题的方法
css 样式表作用域冲突问题：
由于 CSS 没有作用域的概念，在组件中引入样式表的方法会使得该样式表在整个项目中都生效。如果想只让导入的样式表在当前作用域内有效，需要为其启用模块化。
css 启用模块化：
在webpack.config.js中的css-loader后面追加参数：
//追加参数要使用“？”来进行分隔
//可以在 css-loader 之后，通过？追加参数，
//其中，有一个固定的参数，叫做 modules，表示为普通的 css 样式表，启用模块化
{
test: /\.css$/,
use: ["style-loader", "css-loader?modules"]
//固定提供了某几个参数
//只有 css-loader 才有 modules 这个参数
}
在地址栏里“？”代表追加参数
//修改了文件后，需要重启服务器
运行代码后呈现如下效果：
//对象只有一个属性 title，输出的 obj 里只有一个属性 title
.title1{
color:red;
}
/*css 模块化只针对类选择器和 ID 选择器生效*/
/*对于普通标签选择器 css 模块化不会将标签选择器模块化*/
h1{
font-style:italic;
}
将代码打包保存，输出的组件也会发生变化
//css 只是样式表无法向外包装任何场景，但是为“css-loader”追加了一个”modules”参数就为普通样式表启用模块化
为 h1标题添加样式属性：
如何将 title 后面的属性当做 classname 交给 h1？
只需要把字符串放入 h1中
render() {
return <div>
<h1 className={cssobj.title>这是评论列表组件</h1>
属性添加完毕后，呈如下效果：
上方只有一个对象呈红色，而下方对象没有变成红色，是因为当前样式表对象只属于当前的作用域，且只属于 list 组件，样式表也只能在 list 组件中生效。
#cmtTitle{
font-size:14px;
}
输出结果：
// title 在 list 中生效，后面的 cmdTtile 让每一个对象生效
Cmtitem2.jsx中的代码：
import React from 'react'
import cssobj from '@/css/cmtlist.css'
console.log(cssobj);
export default function CmtItem(props) {return <div>
<h1 className="title">评论人: {props.user}</h1>
<p>评论内容:{props.content}</p>
</div>
}
只使用 cmtTitle 样式表：
<h1 id=={cssobj.cmtTitle}>评论人: {props.user}</h1>
呈如下效果：
//id 以及类名都可以被模块化，其他东西不行
//CmtList2 只针对列表
新建一个 cmtitem.css，输入其内容：
.title{
font-size: 14px;
}
.content{
font-size: 12px;
}
.cmtbox{
border: 1px dashed #ccc;
margin: 10px;
padding: 10px;
box-shadow: 0 0 10px #ccc;
}
在 Cmtltem2.jsx 中导入 cmtitem 样式表：
import cssobj from ‘@/css/cmtitem.css’
return <div className={cssobj.cmtbox}>
<h1 className=fcssobj.tiBle}>评论人: fprops.user}</h1>
<p className={cssobj.content>评论内容:{props.content}</p>
</ div>
}
输出呈如下效果：
//居中设置
.title{
color:red;
text-align:center;
font-weight:200;
}
呈如下效果：
三、总结
为样式表启用模块化
打开 webpack.config.js 配置文件为对应样式表的“css-loader”加上“modules”,代表启用模块化，之后在导入样式表的时候就可以接收一个对象。
