开发者学堂课程【React 入门与实战：使用 localIdentName 来自定义模块化的类名】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8113
使用 localIdentName 来自定义模块化的类名
目录
一、设置样式
1.使用普通的 style 样式
2.启用 css-modules
3.使用 lo calI dent Name 自定义生成的类名格式，可选的参数有
一、设置样式
不难发现，在代码中设置类名是自动设置的，很有个性化，导致不知里面的内容，但同时也给大众了另一个参数，如下：
1.使用普通的 style 样式
<h1 style-{ {color: 'red ' , font weight: 200] }></h1>
2.启用 css-modules
（1）修改 webpack.config.js 这个配置文件，为 css-loader 添加参数:
{ test: /\.css$/ , use: [ 'style-loader ' , 'css- loader? mod ules'] }
//为.css 后缀名的样式表启用 CSS 模块化；
（2）在需要的组件中，import 导入样式表，并接收模块化的 CSS 样式对象:
import cs50bj from '../css/cmtList.css'；
（3）在需要的 HTML 标签上，使用 class Name 指定模块化的样式:
<h1 class Name={css0bj.title}>评论列表组件</ h1>
3.使用 lo calI dent Name 自定义生成的类名格式，可选的参数有:
（1）[path]表示样式表，相对于项目根目录所在路径；
小部分代码设置：
{ test: /\.css$/, use: [ 'style-loader','css-loader ?modules &local Ident Name=[path]' }，
//打包处理 css 样式表的第三方 loader.
执行结果：
{title: "src-css-", content: "src-css-", cmtbox: "src-css-"}
{"title: "src-css-"}
[WDS] Hot Module Replacement enabled.
（2）[name]表示样式表，文件名称；
小部分代码设置：
{ test: / \.css$/ , use: ['style-loader','css-loader ?modules &local Ident Name=[path][name]'] }，
//打包处理 css 样式表的第三方 loader.
执行结果：
{title: "src-css- cmtitem", content: "src-css- cmtitem", cmtbox: "src-css- cmtitem"}
{title: "src-css- cmtlist"}
[WDS]Hot Nodule Replacement enabled.
（注意：如果执行结果中不带有“-”，在写代码时需要手动添加）
（3）[local]表示样式的类名，定义名称；
小部分代码设置：
{test: /\.css$/, use: ['style-loader', 'css-loader ?modules &local Ident Name=[path][name]-[1ocal]'] },
//打包处理 css 样式表的第三方 loader.
执行结果：
title: "src-css-cmtitem-title", content:"src-css-cmtitem-content"， cmtbox: "src-css- cmtitem- cmtbox"]
{title: "src-css-cmtlist-title"}
[WDS] Hot Nodule Replacement enabled.
主要是说在生成模块化样式类名时，[path]表示里要包含所在路径；[name]表示title 所对应的里面应该包括自己的文件名；[local]表示在代码中叫 title，在生成类名中也应该带着 title。
（4）[hash :length]表示32位的 hash 值。
“：”表示可以自定义几位 hash 值，因为如果取32位值会很长，所以在取 hash 值时，一般取到前五位数字或前六位数字，基本上不会重复，hash 就是防止类名重复。
小部分代码设置：
{ test: /.css$/, use: [ 'style-loader ','css- loader ?modules &lo calI dent Name=[path][name]-[local]-[hash:5] ']}，
//打包处理 CSS 样式表的第三方 loader
执行结论：
{title: "src-css-cmtitem-title 800f6", content: "src-cs-cmtiten-content-2f774", cmtbox :"src-ss-cmtitem-cntobox-13da4""}
{title: "src-css-cmtlist-title-63767"}
CmtList2.jsx:45
[WDS]Hot Module Replacement enabled.
