Vite笔记之11-vite配置文件中css配置流程（postcss）

1. postcss在vite.config.js中使用

直接在css.postcss中进行配置, 该属性直接配置的就是postcss的配置。如果有定义postcss.config.js优先级低于vite中的postcss字面量定义的

• postcss-preset-env: 支持css变量和一些未来css语法 自动补全(autoprefixer)

具体配置如下：

vite.config.js文件：

import { defineConfig } from "vite";
const postcssPresetEnv  = require("postcss-preset-env")

export default defineConfig({
        postcss: {
            plugins:[postcssPresetEnv()] // 可以直接写postcssPresetEnv 不要任何配置
        }
    }
});

页面中可写：

.content {
  .main {
    background-color: @mainColor;
        filter:blur(100px);
      // 响应式布局, 左侧一个菜单栏 宽度自适应根据屏幕 30%
      // 400px ---> 父容器
      // 120px  200 * 0.3 -> 60  100px 240px 200px; preset-env会帮助我们做语法降级  vite内部会有一个主流浏览器的支持表
	  width: clamp(100px, 30%, 200px);
	  user-select: none; // 他在其他浏览器上不支持	// 
	  width:clamp(100px,50px,200px);
  }

兼容性好的的css属性不需要加上前缀

每次解析后，vite按需加载，会重新解析 。对于全局变量使用css定义，我们使用的一些未来的css特性是不需要经过less sass的预处理器进行编译, 我们只能交给postcss去处理。

varible.css

:root {
	--globalColor:red;
}

vite.config.js

import { defineConfig } from 'vite'
const path = require('path')
const postcssPresetEnv = require('postcss-preset-env')

export default defineConfig({
    css: {
        postcss: {
            plugins: [
                postcssPresetEnv({
                    importFrom: path.resolve(__dirname, './varible.css') // 就是让postcss知道有一些全局变量需要记录下来 ，包含postcss-custom-properties用于处理css变量
                })
            ] // 可以直接写postcssPresetEnv 不要任何配置
        }
    }
})