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就配置完成了,下面进行简单测试。
Hello world!
以上react tailwind配置好了;
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了;