postcss前世今生

合集 - Vite学习笔记(8)

1.vite初体验2023-07-022.vite依赖预构建2023-07-02

3.postcss前世今生2023-07-03

4.vite插件2023-07-095.性能优化前瞻2023-07-176.vite生产优化2023-07-177.CDN加速2023-07-318.配置proxy代理2023-08-01

收起

postcss用处

• 语法降级
• 前缀补全
• 编译less，scss等文件

安装

postcss安装好后，它并不会帮你处理css文件，你需要安装插件（中间件）来处理css，less，scss文件。

postcss.config.js

module.export = {
// 安装了一个预设 预设就是相当于最佳实践，已经帮你安装好了很多东西
  plugin:[postcssPresetEnv(/*pluginOptions*/)]
}

postcss又叫做后置处理器

在vite中使用

import { defineConfig } from "vite"

export default defineConfig({
  // 处理css
  preprocessorOptions:{
    less:{
      // 更多的配置直接看less或者scass的官网
      math:'always',
      globalVars:{
        // 定义全局变量
        mainColor:'red'
      }
    },
    scss:{

    },
    postcss:{
      plugin:[postcssPresetEnv]
    }
  },
  // 源代码映射
  devSourcemap:true
})

或者也可以把配置文件拎出来放进 postcss.config.js中