react样式

1. 使用普通的 style 样式

   <h1 style={ {color: 'pink', fontWeight: 200} }></h1>
   

2. 启用 css-modules

   1. 修改 webpack.config.js这个配置文件，为 css-loader 添加参数：

      { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] } // 为 .css 后缀名的样式表  启用 CSS 模块化
      

   2. 在需要的组件中，import导入样式表，并接收模块化的 CSS 样式对象：

      import cssObj from '../css/CmpList.css' 
      

   3. 在需要的HTML标签上，使用className指定模块化的样式：

      <h1 className={cssObj.title}>评论列表组件</h1>
      

3. 使用localIdentName自定义生成的类名格式，可选的参数有：

   • [path] 表示样式表 相对于项目根目录 所在路径
   • [name] 表示 样式表文件名称
   • [local] 表示样式的类名定义名称
   • [hash:length] 表示32位的hash值
   • 例子：{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }

4. 使用 :local() 和 :global()

   • :local()包裹的类名，是被模块化的类名，只能通过className={cssObj.类名}来使用

     同时，:local默认可以不写，这样，默认在样式表中定义的类名，都是被模块化的类名；

   • :global()包裹的类名，是全局生效的，不会被 css-modules 控制，定义的类名是什么，就是使用定义的类名className="类名"

5. 注意：只有.title这样的类样式选择器，才会被模块化控制，类似于body这样的标签选择器，不会被模块化控制；

在项目中启用模块化并同时使用bootstrap

1. 把 自己的样式表，定义为 .scss 文件

2. 第三方的 样式表，还是 以 .css 结尾

3. 我们只需要为自己的 .scss 文件，启用模块化即可；

4. 运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader

5. 添加loader规则：

   { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] } // 打包处理 scss 文件的 loader