解决模块化css和全局css的问题

下载依赖包：

yarn add babel-plugin-react-css-modules -D

然后在babel.config.js的plugin属性里添加下面代码

[
      'react-css-modules',
      {
        generateScopedName: '[name]-[hash:base64:8]',
        filetypes: {
          '.less': {
            syntax: 'postcss-less',
          },
        },
      },
    ],

这样就可以解析less的模块化css样式了

在jsx语法中就可以这样用模块中的css样式名

import "./style.less";

const App = ()=>{
  return <div styleName="main" className="main"></div>
}

styleName就是模块化的css文件名称

className是未被模块化的css文件名称

解决了模块和全局css的应用问题