请问一下老师关于css模块化打包
来源：3-4 使用 Loader 打包静态资源（样式篇 - 下）
hy_wang
2019-02-23
5回答
-
问题3解答：
css module解决了组件嵌套过程中，样式污染的问题。同时引入了另外的问题，样式都是私有化了，如何抽象公共样式？
css module提供了:global()来使得样式全局化，但全局样式分散在各处不利维护。我觉得可以这样做：
在js模块入口处，引入公共样式模块
// 所谓入口，可以是应用入口，也可以是组件的某节点
import 'common.less';
<div className="commonstyle"></div>
然后在js模块中，使用公共样式和私有样式
import style form './compStyle';
<div className={`commonstyle ${style.property}`}></div>
请指正哈。
212019-02-24 -
renderman
2019-02-23
问题2的解答：
css module只做一件事，就是对类名或id名（事实上只比对名称，不管你是什么类型）以webpack的 localIdentName定义的方式进行重命名。
.a{
.b{
.a{...}
.b{...}
.c{...}
}
.c{...}
}
#a{...}
最终在js模块中，style将是一个对象（样式名称和自定义名称的键值对）
{
a:'xxx',
b:'yyy'
c:'zzz'
}
最终编译出来的css是这样的
.x'x'x{
.yyy{
.xxx{...}
.yyy{...}
.zzz{...}
}
.zzz{...}
}
#xxx{...}
如题，css module只对类名和id名称做修改，在js模块中只能调用类名和id名称。
00 -
renderman
2019-02-23
由于imooc的编辑器很差劲，段落文字很难看清，见谅只能这样跟帖方式。
问题1的解答：
webpack配置中规则中，css-loader部分
{
loader: "css-loader",
options: {
importLoaders: 2, // 必须包含其他编译loader，否则非法属性可能会被过滤
modules: true, // 开启css module
localIdentName: "[path]_[name]_[local]_[hash:base64:5]" // 根据自己喜好，hash部分是真正在选择器中起到隔离作用的，前面部分在样式自查时方便定位
}
}
css模块中，以类名或者id去命名。不过官方建议只使用类名。
.clazz{}
#id{}
js模块中,以模块名.属性名去调用
import style from './cssmodule.less';
<div className={style.clazz}>类名</div>
<div id={style.id}>id名</div>
就这样，请自查。
00 -
renderman
2019-02-23
不请自来，尝试回答同学问题：
*问题1：使用.和#样式选择器没有奏效？（css module的关键使用点）
*问题2：id选择器能不能用，哪些能用？（css module的原理说明）
*问题3：工程中如何做样式抽象（我自己加的）
00 -
hy_wang
提问者
2019-02-23
老师我的这个imooc的网页很卡..所以就把问题发送在了底下。
就是想请问一下老师关于模块化的时候，老师单独引入了css文件然后使用了 模块.类名操作了类。
但是如果是id呢？或者说其他选择器呢？想请问一下老师模块化应该怎么办。。
我自己尝试使用.和#引入都没用
00
相似问题