react+typescript使用 @craco/craco和craco-less支持less和css-modules 的解决方案

依赖安装

// yarn 安装
yarn add @craco/craco

由于脚手架默认不支持 less，所以需要通过拓展来实现：

// 安装less解析依赖
yarn add craco-less less less-loader -D

项目根目录下新建一个 craco.config.js 文件：

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

支持css-moudle

const CracoLessPlugin = require("craco-less");

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                cssLoaderOptions: {
                    modules: {
                        localIdentName: "[local]_[hash:base64:5]"
                    }
                },
                // less loader options
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { "@primary-color": "#1DA57A" },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};

如果ts找不到less

// Cannot find module './*.less' or its corresponding type declarations.

全局ts配置文件typings.d.ts，也可能叫.d.ts配置

/// <reference types="react-scripts" />

declare module "*.less" {
    const content: { [className: string]: string };
    export default content;
}

可扩展内容如下：

declare namespace NodeJS {
    interface ProcessEnv {
        readonly NODE_ENV: 'development' | 'production' | 'test';
        readonly PUBLIC_URL: string;
    }
}

declare module '*.avif' {
    const src: string;
    export default src;
}

declare module '*.bmp' {
    const src: string;
    export default src;
}

declare module '*.gif' {
    const src: string;
    export default src;
}

declare module '*.jpg' {
    const src: string;
    export default src;
}

declare module '*.jpeg' {
    const src: string;
    export default src;
}

declare module '*.png' {
    const src: string;
    export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
    import * as React from 'react';

    export const ReactComponent: React.FunctionComponent<React.SVGProps<
        SVGSVGElement
        > & { title?: string }>;

    const src: string;
    export default src;
}

declare module '*.module.css' {
    const classes: { readonly [key: string]: string };
    export default classes;
}

declare module '*.module.scss' {
    const classes: { readonly [key: string]: string };
    export default classes;
}

declare module '*.module.sass' {
    const classes: { readonly [key: string]: string };
    export default classes;
}
declare module '*.module.less' {
    const classes: { readonly [key: string]: string };
    export default classes;
}