React中引入Less

2021-09-16  本文已影响0人  Poppy11

如果使用的是create-react-app则可以参考本章方法,若是引入了antd,则需要使用Antd官方介绍的方法。亲测,在引入antd后,再使用修改webpack配置方法,引入less是无效的

1、首先显示create-react-app脚手架配置

npm run eject

2、找到项目下 config/webpack.config.js,在 file-loader 之前加入这部分代码

// less 开启模块化
{
  test: /\.less$/,
  exclude: /node_modules|\.module\.less$/,  // 排除 xxx.module.less 模块化文件
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'less-loader'
    }
  ]
},
{
  test: /\.module\.less$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[local]_[hash:base64:5]'
        }
      }
    },
    {
      loader: 'less-loader'
    }
  ]
},

3、下载less-loader依赖,版本过高则会报错,推荐此版本

npm install less-loader@6.0.0
上一篇 下一篇

猜你喜欢

热点阅读