使用 Less

由于 Create React App 中没有支持使用 Less 来编写 CSS Module,所以如果要在应用中使用 Less,例如使用 Ant Design 并使用自定义主题,就必须使用 react-app-rewired 搭配 customize-cra 来对 Less Loader 进行配置。

以下是配置 Less Loader 并定义 Ant Design 主题色的示例。

const { override, addLessLoader } = require('customize-cra');

module.exports = {
  webpack: override(
    addLessLoader({
      lessOptions: {
        loader: 'css-loader',
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#FF7A45'
        },
        cssModule: {
          localIdentName: '[path][name]__[local]--[hash:base64:5]' // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
        }
      },
      sourceMap: true
    })
  )
};