使用postcss完善vite项目中的css配置

开启AdminJS成长之旅！这是我参与「AdminJS · 12 月更文挑战」的第17天，点击查看活动详情

简介

前几篇文章，我们详细的讨论了一些Vite中关于css的配置。学了vite中css的几个配置项：

• preprocessorOptions配置-参考文章：Vite中预处理器(如less)的配置
• modules配置-参考文章：vite中如何更优雅的使用css
• vite中静态资源（css、img、svg等）的加载机制及其相关配
• devSourcemap配置-参考文章 Vite中如何使用css的源文件映射

通过这几篇文章，我们可以在vite中配置这样css

export default defineConfig({
  css: {
    // css模块化配置项
  	modules:{
      // ....
    }
    // 预处理器配置项
    preprocessorOptions: {
      less: {
        math: "always",
      }
    },
    devSourcemap:true
  }
})

经常写css，我们都知道css在不同的浏览器兼容性是不同的。比如，有些特殊样式在不同浏览器前需要加上特殊前缀进行兼容:

// 只有chrome和safari支持，且需要添加webkit前缀
-webkit-margin-before
-webkit-margin-after

我们可以在这个网站来测试不同css的兼容性

autoprefixer.github.io/

为了实现不同浏览器的兼容，我们最好的方式就是将所有css前缀补齐。但是，这样太浪费时间了！还好，postcss可以帮助我们一次性解决这些问题！

什么是postcss

postcss官网：www.postcss.com.cn/

postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具，postcss自身没有什么功能，只是一个平台，可以下载各种插件，从而实现一些功能！

• Autoprefixer ****自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
• PostCSS Preset Env ****帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，
• CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

注：PostCSS Preset Env 实际预设了很多好用的css插件，完全可以替代autoprefixer使用。

postcss可以通过在根目录创建postcss.config.js来进行配置，如：

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
    plugins: [postcssPresetEnv(/* pluginOptions */)]
}

Vite中配置postcss

postcss在vite中的两种配置方式

• 项目根目录创建postcss.config.js文件
• 在vite.config.js内的css.postcss属性内直接配置

import { defineConfig } from "vite";
export default defineConfig({
  css: {
    postcss:{
      // 一些配置
    }
  }
});

两种配置方法一致，我们以第二种为主

postcss配置前后代码的异同

未配置postcss时

import { defineConfig } from "vite";
export default defineConfig({
  css: {
    postcss:{}
  }
});

首先，我们创建一个test.css文件并写入基础css

.postcss-test {
  height: 30px;
  background: blueviolet;
  user-select: none;
}

然后再main.js内引入文件

import "./test.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = "postcss-test"
div.innerText ="别看我只是一只羊"

使用vite运行html，可以看到css和我们写的内容是一致的。

配置postcss时

我们主要使用postcss-preset-env插件，这个插件支持css变量和一些未来css语法以及自动补全(autoprefixer)

安装

npm i postcss-preset-env -D

配置

import { defineConfig } from "vite";
const postcssPresetEnv = require("postcss-preset-env") 
export default defineConfig({
  css: {
    postcss:{
      plugins:[postcssPresetEnv()]
    }
  }
});

重启vite服务，可以发现，postcss-preset-env的css前缀补全已经生效了。