解决：使用create-react-app创建react项目引入less文件无效

sweethhheart

已于 2023-07-14 09:48:50 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： react.js less 前端

于 2023-07-04 18:31:53 首次发布

本文链接：https://blog.csdn.net/heartqian/article/details/131540674

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章介绍了在使用create-react-app创建的React项目中，less样式无法正常应用的解决方法。主要步骤包括：安装less和less-loader（版本低于8），通过`eject`命令生成webpack配置文件，然后在webpack.config.js中添加针对less和less模块的规则，最后重启项目使改动生效。示例代码展示了如何导入和使用less样式。

摘要由CSDN通过智能技术生成

使用 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;