vite + react 相关配置
可能会报错:Internal server error: Failed to resolve import "antd/dist/antd.less" from "src/main.tsx". Does the file exist?3、安装less,结合antd进行配置,安装 less(切记,因为 less 没有在代码中 import,所以将其放在 devDependencies 中)同时修改一
·
1、使用Vite搭建React项目,选项选react - ts ,运行速度真的很快
npm create vite@latest vite-project
cd vite-project
npm install
npm run dev
2、设置一下路径别名,需要安装一下path
npm install @types/node --save-dev
import { defineConfig } from 'vite'
import {resolve} from 'path'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname,'src')
}
}
})
同时修改一下tsconfig.json,让IDE能识别这个别名,加入paths
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
3、安装less,结合antd进行配置,安装 less(切记,因为 less 没有在代码中 import,所以将其放在 devDependencies 中)
npm install less -D
npm install antd
vite.config.ts
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname,'src')
}
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
"primary-color": "#EAA516", //全局样式
},
}
}
}
})
引入antd 在main.ts中
import 'antd/dist/antd.less'
可能会报错:Internal server error: Failed to resolve import "antd/dist/antd.less" from "src/main.tsx". Does the file exist?
解决方案: 降低antd的版本 :npm install antd@4.24.1
更多推荐
已为社区贡献1条内容
所有评论(0)