使用 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
})
)
};