React Typescipt 项目中模块化使用less

1、创建typescript项目，使用命令npx create-react-app my-app --template typescript

2、在创建的项目中运行npm run eject命令，提取出webpack配置

3、my-app/config/webpack.config.js在 webpack.config.js中修改添加less相关配置

1. 添加 less 的正则匹配
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/; 

2. 添加 less-loader 的配置引入
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
        importLoaders: 1,
        modules: true,
        sourceMap: isEnvProduction && shouldUseSourceMap,
    }, 'less-loader'),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
    }, 'less-loader'),
},

上面关于less-loader的配置和sass的配置基本保持一致

4、添加less 和 less-loader 使用命令npm install less less-loader --save-dev

完成上述配置，重新启动项目。项目已经可以正常使用less，但是less文件的引入必选使用require。例如：const styles = require('...路径/xx.less')，如果需要使用import方式引入less文件，还需要进行下面配置

5、

1.项目中创建 externals.d.ts 文件（文件位置自己定），文件内容如下：

declare module '*.less'

2.找到项目中的tsconfig.json文件，在include中添加刚才创建的externals.d.ts文件。例如

完成上述配置，重启项目。就可以在ts中通过import引入less文件。