React环境下 css + scss + less 样式表对module配置启用模块化

 

在 React 项目环境下，要去实现样式的方式有三种方法，前两种没有办法实现真正的把样式表单独抽离出来；
如果把样式表抽离出来，因为样式表没有作用域，所以，把样式抽离出来，必须要启用模块化，通过参数 modules 来启动模块化的。

 

 

注意： 不管你要用启用哪种类型的样式表的模块化，在引用他们的时候，要用一个对象来接收！！！！

 

 

注1： modules 参数是启用模块化！
注2： localIdentName 参数是自定义模块化的类名
注3： 启用模块化，只对 类名 和 id 有用，而对 标签无用！！

1、普通样式表启用模块化— .css 文件

 

1、首先下载安装相应的 loader
运行cnpm i style-loader css-loader -D

 

2、在 webpack.config.js 文件中进行如下配置

    module: {//所有第三方模块的匹配规则
    rules: [//第三方匹配规则
        { 
        // 大家可以在 css-loader 之后，通过 ?  追加参数（只有css-loader可以加参数），
        // 其中，有个固定参数，叫做 modules ，这里表示为 普通的 css 样式表，启用模块化
        { test: /\.css$/, use: ["style-loader", "css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]"] },//打包处理 css 样式表的第三方loader
    ]
}

　　以上配置完就已经启动.css 文件的模块化了！

使用方法： 例子

我要在组件中引用样式

.title{
    font-size: 14px;
}
.content{
    font-size: 12px;
}
.cmtbox{
    border: 1px dashed #ccc;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 0 5px;
}

　　

//导入的时候一定要用一个【对象】 接收
import cssObj from 'xxxx.css'
console.log(cssObj) //看看这个打印出来的值，就只到下边为啥那样用了

// 使用 function 构造函数，定义普通的无状态组件
function CmtItem(props) {
	//在引用的时候，原来样式表中的类名，经过模块化后，已经不再是真正的类名了！而是他们所对应的值才是真正的类名！！（看上边console.log出来的东西）
    return <div className={cssObj.cmtbox}>
        <h1 className={cssObj.title}>评论人：{props.user}</h1>
        <p className={cssObj.content}>评论内容：{props.content}</p>
    </div>
}

　　

---

 

 

2、.scss 文件样式表启用模块化

1. 首先运行 cnpm i sass-loader node-loader -D
2. 在 webpack.config.js 文件中进行如下配置

    module: {//所有第三方模块的匹配规则
    rules: [//第三方匹配规则
        // 在 css-loader 之后，通过 ?  追加参数（只有css-loader可以加参数），
        { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] },//打包处理 scss 文件的loader
    ]
}

　　以上配置完就已经启动.css 文件的模块化了！
使用方法： 例子

/* xxx.scss 文件*/
.title{
    font-size: 14px;
}
.content{
    font-size: 12px;
}
.cmtbox{
    border: 1px dashed #ccc;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 0 5px;
}

　　

import cssobj from 'xxxx.scss'
console.log(cssobj) //看打出来的结果是个对象

// 使用 function 构造函数，定义普通的无状态组件
function CmtItem(props) {
    return <div className={cssobj.cmtbox}>
        <h1 className={cssobj.title}>评论人：{props.user}</h1>
        <p className={cssobj.content}>评论内容：{props.content}</p>
    </div>
}

　　

3、.less 文件启用模块化

基本都一样，配置less 的 loader，然后启用模块化，一定是在css-loader 后边加参数！！！！！！

 

 

特别注意： 如果不想给自己找麻烦，在写React项目的时候，自己的样式写成 .scss 或者 .less ，自己的样式表启用模块化，因为大部分第三方库的样式都是.css后缀，如果你启用css模块化，它们的样式就GG了！！！！！！！

 

---

 

 

4、只想会用只看前边的就行，这是详细了解

1. 在引用样式表的文件的时候，用一个对象接收，打印这个对象，你会发现，这个对象里包含的是你样式表中的所有的类名，但是特别注意 这里的类名已经不是真正的类名，而他们所对应的值才是真正的类名，结合用法就能懂了！！！
2. localIdentName 这个参数详解：
   • 1、[path]： 表示样式表 相对于项目根目录 所在的路径
   • 2、[name]： 表示 样式表文件名称
   • 3、[local]： 表示 样式的类名 定义名称
   • 4、[hash:length]： 表示32位的hash值（防止重复用hash值代替）
   • 5、例子：{test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]']}

你们打印出来接收的那个对象对着看看，这些参数就秒懂了：

 

 

 使用 :local() 和 :global()

• 1、:local() 包裹的类名，是被模块化的类名，只能通过 className={cssobj.类名} 来使用同时，:local 默认可以不写，这样，默认在样式表中定义的类名，都是被模块化的类名；
• 2、:global() 包裹的类名，是全局生效的，不会被 css-modules 控制，定义的类名是什么，就是使用定义的类名 className='类名'

 

/* 注意：被 ：global() 包裹起来的类名，不会被模块化，而是或全局生效 */
:global(.test){
	font-size:12px;
	}