配置less

因为使用的是TypeScript,而react-scripts-ts 自动配置了一个 create-react-app 项目支持 TypeScript。
详见

1.搭建项目

create-react-app my-app --scripts-version=react-scripts-ts

使用create-react-app搭建的项目默认不显示webpack的config配置文件夹

2.显示配置文件夹

yarn eject
yarn

因为此操作会修改package.json文件，需要重新yarn一次

3.安装less相关依赖

npm install less less-loader --save-dev

4.配置webpack.config.dev.js和webpack.config.prod.js文件(做相同配置)

• 找到 css-loader所在位置
• 修改css的test正则 为/\.(css|less)$/,
• 在use中添加less-loader

{
    loader: require.resolve('less-loader'),
    options: {
      importLoaders: 1
    }
}

• 找到exclude，在末尾添加/\.(css|less)$/