create-react-app 配置 less

使用 react-app-rewired 修改 webpack 配置

安装 react-app-rewired 和 less

 yarn install react-app-rewired less less-loader --dev  --registry https://registry.npm.taobao.org

添加config-overrides.js

/* config-overrides.js */
module.exports = function override(config, env) {
  let loaders = config.module.rules.find((rule) => Array.isArray(rule.oneOf))
    .oneOf

  loaders.unshift({
    test: /\.less$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          modules: {
               localIdentName: '[local]--[hash:base64:5]'
          },
        },
      },
      {
        loader: require.resolve('less-loader'),
        options: {
          lessOptions: {
            strictMath: false,
            javascriptEnabled: true
          },
        },
      },
    ],
  })
  return config
}

修改package.json scripts

{
  //......
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject",
    "_start": "react-scripts start",
    "_build": "react-scripts build",
    "_test": "react-scripts test",
    "_eject": "react-scripts eject"
  },
  //.....
}