为普通样式表通过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”,代表启用模块化，之后在导入样式表的时候就可以接收一个对象。
