create-react-app配置less环境

create-react-app配置less环境

最近使用react搭建一个私人项目，css解决方案采用less+css module，项目脚手架采用create-react-app。
利于脚手架生成项目后，发觉less无法直接使用，参考网上教程，需对项目进行配置，配置方式有两种：

• 通过cra自带的npm run eject暴露出项目配置文件，然后在配置文件中对webapck配置进行更改。
• 通过react-app-rewired对cra项目配置进行重写

第二种方式显得更为优雅点，具体配置方法如下：

安装react-app-rewired及customize-cra

npm install customize-cra react-app-rewired --dev

创建config-overrides.js文件

项目根目录下创建config-overrides.js文件
添加文件内容

const { override, addLessLoader, fixBabelImports } = require("customize-cra");
module.exports = override(
  addLessLoader({
    strictMath: true,
    noIeCompat: true,
    modifyVars: {
      "@primary-color": "#1DA57A", // for example, you use Ant Design to change theme color.
    },
    cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.
    cssModules: {
      localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
    },
  }),
  fixBabelImports("import", {
    libraryName: "antd",
    style: "css",
  })
);

addLessLoader方法即为配置less环境的配置方法，需要注意的是cssModules的文件格式，上述配置表示只有less文件名为*.module.less时css module才会起效，大家有兴趣可以尝试不同的文件命名，import后通过console.log打印出对象看下效果。