react css样式作用域的问题

1、下载css，style依赖

cnpm i style-loader css-loader -D

在 webpack.config.js 中配置

  module: {
        // 第三方匹配规则
        rules: [
            {test: /\.css&/, use: ['style-loader', 'css-loader']}
        ]
    },

在页面中引入，发现当时的css样式是应用于全局的。
在父组件中导入css样式，在子组件中也可以使用。
react中的css样式是没有作用域的

import CmtList from '../css/CmtList.css';

<h1 className='title'>这是评论列表</h1>

那么如何是css样式是有作用域的呢？

2、为css样式添加作用域

像添加路由文件一样，在声明运用依赖的同时加上参数
该参数的作用是时css模块化
添加后项目则不生效了

    module: {
        // 第三方匹配规则
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader?modules']}
        ]
    },

在加上 modules 参数前，打印导入的css模块是一个空对象
在加上 modules 参数后，打印导入的css模块是在css中声明的class选择器和id选择器

说明确实将css文件模块化了

import CmtList from '../css/CmtList.css'
console.log(CmtList, 'CmtList');  // {}  导入前
console.log(CmtList, 'CmtList');  
//{title: "nETG9GHcF81koGv3lI0nZ"}  导入后

当前css中声明了如下样式，但是到处模块化后发现只有class选择器，没有标签选择器。

所以只能是id选择器和class选择器可以限定作用域，标签选择器的作用域仍旧是全局

.title {
    font-size: 11px;
}
h1{
    color: red;
}

修改样式引用

//模块化前
<h1 className='title'>这是评论列表</h1>
//模块化后
<h1 className={CmtList.title}>这是评论列表</h1>

3、自定义类名生成格式

注：被模块下后，类名会改变

生成的类名是这样的，一串乱码不知道是干嘛的，我们可以规定其生成的格式

{title: "nETG9GHcF81koGv3lI0nZ"}  导入后

在webpack.config.js中配置

    module: {
        // 第三方匹配规则
        rules: [
            {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
            {
                test: /\.css$/, use: ['style-loader', {
                    loader: "css-loader?modules",
                    options: {
                        modules: {
                           localIdentName: '[path][name]==[local]==[hash:5]',
                        }
                    }
                }]
            }
        ]
    },

我们在css样式中写的是这样：

.red {
    color: red;
}

.green {
    color: green;
}

被模块化后审查css样式

4、某个css样式不想被模块化，

//css文件
:global(.green){
    color: green;
}

//jsx中又可以使用className=字符串来定义了
<h1 className='green'>哈哈</h1>

.green属性又变成了全局样式

注：:local(.类名)会被模块化，为默认，一般不用

5、安装boostrap

cnpm i bootstrap@3.3.7 -S

如果在引用某个包的时候，这个包被安装到了 node_modules 目录中，可以省略 node_modules 这一层目录，直接以包名开始引入自己的 模块 或 样式表

import 'bootstrap/dist/css/bootstrap.css'

无法解析字体图标文件，需要下载字体依赖的文件

6、安装字体依赖包

cnpm i  file-loader -D

    module: {
        // 第三方匹配规则
        rules: [
            {test: /\.ttf|woff|woff2|eot|svg$/, use: 'file-loader'},
        ]
    },

当前boostrap的css被模块化了，不可以再使用官网定义的类名了。
如果 exclude: /node_modules/，则webpack不会编译boostrap样式文件了，也不可以。

规定：
第三方的 样式表，都是以 .css 结尾， 这样，我们不要为 普通的 .css 启用模块化
自己的样式表，都要以 .scss 或 .less 结尾， 只为 .scss 或 .less 文件启用模块化

cnpm i sass-loader  node-sass -D

    module: {
        rules: [
             // 打包处理 CSS 样式表的第三方loader
            { 
                test: /\.css$/, use: ['style-loader', 'css-loader']
            },
              // 打包处理自己的sass样式
            {
                test: /\.scss$/, use: ['style-loader', {
                    loader: "css-loader?modules", options: {
                        modules: {
                            localIdentName: '[path][name]==[local]==[hash:5]',
                        }
                    }
                }, 'sass-loader']
            }
        ]
    },