使用 create-react-app 创建的项目默认对引入 less 文件不生效。

解决方法

这里我们需要使用 className={style.xxx} 处理页面样式。
使用如下指令安装 less 和 less-loader，注意 less-loader 的版本不要8以上的。

npm install less-loader@7.3.0 --save-dev

然后找到 webpack.config.js 文件，进行修改。（使用 create-react- app 创建项目时，默认配置文件没有生成，所以需要使用以下指令来生成配置文件:

npm run eject

找到webpack.config.js，添加如下内容：

//引入 less 文件的配置
const lessRegex = /\.less$/;
// const lessModuleRegex = /\.module\.less$/;    //如果使用className='xxx'形式设置style，设置这一行也可以
const lessModuleRegex = /\.less$/;        //注意这里不采用上面的写法，上面的通过className='xxx' 可以改变样式，但是引入styles.xxx就是undefined

然后找到 webpack.config.js 文件中的 return --> module.rules 部分，添加以下代码：

 
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3, // 用于决定css文件中读取到@import时被外层数组中哪个处理
      sourceMap:  isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
      modules: {
        mode: 'icss',
      },
    },
    'less-loader'
  ),
  sideEffects: true, // 允许通过配置，标识代码是否有副作用
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap:  isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      }
    },
    'less-loader'
  ),
},

最后重启项目，就可以解决了。

import styles from './index.less';
const Home = (props) =>{
    console.log(styles);
    return (
        <div className={styles.content}>我是home页面</div>
    )
}

export default Home;