vite + react + ts + sass 搭建项目
2022年11月8日安装react
|
1 |
npm create vite@latest name-of-your-project -- --template react |
安装sass
|
1 |
npm add -D sass |
安装postcss-px-to-viewport
|
1 |
npm add -D postcss-px-to-viewport |
vite.config.ts 配置 postcss-px-to-viewport
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import {defineConfig} from 'vite' import react from '@vitejs/plugin-react' import postcssPxToViewport from "postcss-px-to-viewport" // https://vitejs.dev/config/ /** * */ export default defineConfig({ plugins: [react()], css: { postcss: { plugins: [ postcssPxToViewport({ unitToConvert: 'px', //要转化的单位 viewportWidth: 1920, //UI设计稿的宽度 viewportHeight: 1080, unitPrecision: 6, //转换后的精度，即小数点位数 propList: ['*'], //指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: 'vw', //指定需要转换成的视窗单位，默认vw fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位，默认vw selectorBlackList: ['ignore-'], //指定不转换为视窗单位的类名， minPixelValue: 1, //默认值1，小于或等于1px则不进行转换 mediaQuery: true, //是否在媒体查询的css代码中也进行转换，默认false replace: true, //是否转换后直接更换属性值 exclude: [], landscape: false //是否处理横屏情况 }) ] } } }) |
