react样式模块化——less/xxx.moudle.css

解决问题：解决在不同组件中因类名一致导致的样式冲突

1、使用xxx.moudle.css

xxx.moudle.css样式文件：

index.jsx引入样式文件：

2、使用less预处理器，craco.config.js配置（推荐）

1.安装craco

yarn add @craco/craco 或者 npm i @craco/craco

2.安装less-loader 

yarn add less less-loader -D 

3.配置croca.config.js文件

const CracoLessPlugin = require("craco-less");

module.exports = {

  plugins: [

    {

      plugin: CracoLessPlugin,

      options: {

        lessLoaderOptions: {

          lessOptions: {

            modifyVars: { "@primary-color": "#181616" },   //这个可以改变antd组件的默认颜色

            javascriptEnabled: true

          }

        }

      }

    }

  ],

}

4.引入css样式

index.jsx中直接import引入css样式：

index.less样式如下：

因此，就算在Head组件中选中了相同的标签；也与Content组件的样式不冲突。

Head组件的样式：

最后效果：

注：此文章仅为参考