react CRA+tailwind+craco+less配置

React配置Tailwindcss

1.使用create-react-app创建项目

npx creat-react-app my_app
cd my_app

2.利用npm安装tailwindcss，postcss，autoprefixer

npm install -D tailwindcss postcss autoprefixer

注释：
postcss是一个JavaScript 工具，可以用来转换 CSS 代码。
postcss可以使用不同插件实现自动添加浏览器前缀，代码合并，代码压缩等等效果。
autoprefixer给部分CSS属性加上不同的浏览器前缀，兼容所有浏览器；

3.创建tailwindcss以及postcss的配置文件（如果在craco.config.js中有postcss配置则不用创建postcss配置文件）；

npx tailwindcss init -p

4.打开tailwindcss.config.js，修改成如下内容:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js, jsx, ts, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5.打开主入口文件，并增加以下内容

@tailwind base;
@tailwind components;
@tailwind utilities;

6.完成以上五个步骤后，tailwindcss就配置完成了，下面进行简单测试。

<h1  className="underline decoration-sky-500/30">
     Hello world!
</h1>

以上react tailwind配置好了；

react项目中craco配置less

1.安装craco
注释：
用Create React App脚手架创建的项目，想要自定义配置，就需要npm run eject，暴露出所有的配置，且不可逆。craco可以让我们不需要eject，配置一个craco.config.js，就可以自定义各种配置，如处理样式、支持UI组件库、设置别名

npm i @craco/craco -D
或者
yarn add @craco/craco -D

2.修改package.json文件,把scripts里面的代码除了eject，其他的react-script都换成craco;

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3.安装craco-less postcss-px-to-viewport（px转换）

npm i craco-less postcss-px-to-viewport -D
或
yarn add  craco-less postcss-px-to-viewport -D

注释：
postcss-px-to-viewport 是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。

4.在package.json同级目录下创建一个craco.config.js文件,并配置一下内容，不需要postcss-px-to-viewport的可以把style对象里的内容去掉

const CracoLessPlugin = require('craco-less');
const path = require('path');
const pathResolve = pathUrl => path.join(__dirname, pathUrl);
const px2vw = require('postcss-px-to-viewport');
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
    // 去掉检查否则自定义的  postcss.config.js   .svgrrc.js 配置不生效
    eslint: {
        enable: false
    },
    webpack: {
        alias: {
            '@': pathResolve('src'),
            '@assets': pathResolve('src/assets'),
            '@common': pathResolve('src/common'),
            '@components': pathResolve('src/components'),
            '@pages': pathResolve('src/pages'),
            '@store': pathResolve('src/store'),
            '@utils': pathResolve('src/utils')
        },
        configure: (webpackConfig, { env, paths }) => {
            // 添加svg文件处理规则
            webpackConfig.module.rules.push({
                test: /\.svg$/i,
                issuer: /\.[jt]sx?$/,
                loader: '@svgr/webpack',
            });
            webpackConfig.output.publicPath = isDev ? '/' : '/speech_recognition/mobile/'
            return webpackConfig;
        }
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                        modifyVars: {
                            hack: `true; @import (reference) "${path.resolve(__dirname, './src/styles/var.less')}";` // 将var.ess里的变量变成全局
                        },
                    },
                },
            },
        },
    ],
    style: {
        postcss: {
            mode: 'extends',
            loaderOptions: {
                postcssOptions: {
                    ident: 'postcss',
                    plugins: [
                        px2vw({
                            unitToConvert: 'px', // 要转化的单位
                            viewportWidth: 750, // UI设计稿的宽度 750 667  1024 1536
                            unitPrecision: 6, // 转换后的精度，即小数点位数
                            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
                            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
                            selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类名，
                            minPixelValue: 4, // 默认值1，小于或等于4px则不进行转换
                            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                            replace: true, // 是否转换后直接更换属性值
                            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                            landscape: false, // 是否处理横屏情况
                            landscapeUnit: 'vw',
                            landscapeWidth: 1440
                        }),
                    ],
                },
            },
        },
    },
    devServer: {
        proxy: {
            '/speech_recognition': {
                target: 'http://xxx',  // 10.7.105.92  172.30.33.209
                changeOrigin: true,
                secure: false,
                ws: true
            }
        },
    },
};

5.以上less就配置好了，就可以在react项目中使用less了；