react中使用less和全局样式

前言：使用create-react-app脚手架搭建的react项目，会自带css和sass，但是没有less,如果在项目中需要使用less，需要进行下载并进行一些配置。

1.配置： （1）暴露webpack配置文件。create-react-app搭建的项目看不到webpack相关配置文件，因此需要输入命令npm run eject将文件暴露出来

打开webpack.config.js文件，在42行加入

const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;  
复制代码

在455行加入

 {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({ importLoaders: 3 }, 'less-loader'),          
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                 {
                    importLoaders: 3,
                    modules: true,
                    getLocalIdent: getCSSModuleLocalIdent,
                    modifyVars:{
                      'primary-color': '#1DA57A',
                      'link-color': '#1DA57A',  
                      'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
                   'less-loader'
             ),
            },
复制代码

保存即可

2.下载：控制台输入yarn add less less-loader --save

3.建立less文件，此处为省事直接在src文件夹下建了一个common.less文件

保存即能看到样式已经应用