使用localIdentName来自定义模块化的类名

使用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.