react使用less

1、安装依赖npm i less less-loader -D2、暴露配置文件使用create-react-app 创建的项目默认是看不到webpack配置文件的，需要先暴露出来，然后才能修改里面的配置信息。npm run eject3、配置less打开webpack.config.js，搜索oneOf，并在数组中添加以下配置{test: /\.less$/,use: [{loader: 'sty

1佳佳佳佳

568人浏览 · 2021-12-30 17:04:59

1佳佳佳佳 · 2021-12-30 17:04:59 发布

1、安装依赖

npm i less less-loader -D

2、暴露配置文件

使用create-react-app 创建的项目默认是看不到webpack配置文件的，需要先暴露出来，然后才能修改里面的配置信息。

npm run eject

在这里插入图片描述
3、配置less

打开webpack.config.js，搜索oneOf，并在数组中添加以下配置

{
  test: /\.less$/,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader', // translates CSS into CommonJS
  }, {
    loader: 'less-loader', // compiles Less to CSS
    options: {
      modifyVars: {
        'primary-color': '#f9c700',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true,
    }
  }]
}

4、重启项目即可