vite postcss

PostCSS

• PostCSS是一款使用JavaScript插件对CSS实现转换的工具
• PostCSS拥有非常强大的插件，典型的比如autoprefixer、cssnext、css modules等。
• PostCSS插件的处理方式类似CSS预处理器，而非预处理器和后处理器。
• PostCSS并非优化CSS的工具，语法也并非CSS的新式语法。

Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.

$ vim vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

import postcssImport from "postcss-import"
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'


export default ({mode})=>{
  //生成自定义用户配置
  return defineConfig({
    //样式表插件
    css:{
      postcss:{
        plugins:[
          postcssImport,
          autoprefixer,
          tailwindcss
        ]
      }
    }
  })
}

PostCSS插件：嵌套CSS样式写法解决方案

插件	描述
postcss-import	支持@import写法
postcss-url	支持@url写法
postcss-bem	支持BEM元素规则命名
postcss-nested	支持类选择器嵌套写法，模拟SASS嵌套选择器写法。
postcss-nesting	支持符合W3C规范的嵌套类选择器写法
postcss-simple-vars	支持变量
postcss-advanced-variables	支持类似SASS自定义变量并引用，实现编写变量、条件、循环。
postcss-preset-env	支持变量运算

PostCSS插件：H5移动端屏幕适用性解决方案

插件	描述
cssnano	优化和压缩CSS，已包含autoprefixer插件。
postcss-aspect-ratio-mini	容器比匹配
postcss-cssnext	实现嵌套编程
postcss-px-to-viewport	将px转换为vw以适应各种屏幕
postcss-write-svg	1px细线的绘制

Import

PostCSS通过@import将样式表合并到一起，当需要通过@import将第三方类库导入到主样式表时，首先需要运行的是@import插件。

插件	描述
postcss-import	支持通过内联内容来转换@import规则
postcss-partial-import	让CSS文件支持@import语法，支持W3C的写法，也支持SASS写法。

postcss-import

• 源代码 https://github.com/postcss/postcss-import

安装插件

$ npm ls postcss-import
$ npm info postcss-import
$ npm i -D postcss-import@latest

postcss-partial-import

• NPM包 https://www.npmjs.com/package/postcss-partial-import
• 源代码 http://www.github.com/jonathantneal/postcss-partial-import
• 支持在CSS文件中使用Sugary @import语法，包括glob-like和Sass-like行为。
• 允许将导入作为脚手架工作来生成

Autoprefixer

• Autoprefixer是一个根据Can I Use解析CSS并为其添加浏览器厂商前缀的PostCSS插件
• Autoprefixer会使用基于当前浏览器支持的特性和属性为CSS添加前缀

查看项目下是否已经安装过Autoprefixer

$ npm ls autoprefixer version

使用NPM为Vue项目安装Autoprefixer

$ npm info autoprefixer versions
$ npm i -D autoprefixer@latest

在PostCSS配置文件post.config.js配置文件的插件属性中添加Autoprefixer

$ vim postcss.config.js

import autoprefixer from "autoprefixer"

export default {
  plugins:[
    autoprefixer
  ]
}

TaildwindCSS

官方网站：https://www.tailwindcss.cn/docs/plugins

• Tailwind CSS是一款实用为主效用优先的CSS框架
• TailwindCSS作为PostCSS插件存在，将基础的CSS拆分为原子级别。
• PostCSS提供Autoprefixer插件用于补全各种浏览器前缀，兼容性更好。

查看项目是否已经安装TailwindCSS

$ npm ls tailwindcss version

使用NPM安装TailwindCSS

$ npm info tailwindcss versions
$ npm i -D tailwindcss@latest

为PostCSS配置TailwindCSS插件

$ vim postcss.config.js

import postcssImport from "postcss-import"
import autoprefixer from "autoprefixer"
import tailwindcss from "tailwindcss"

export default {
  plugins:[
    postcssImport,
    autoprefixer,
    tailwindcss
  ]
}

配置TailwindCSS独立配置文件

$ vim tailwind.config.js

export default {
  
}

安装VSCode插件

• Tailwind CSS IntelliSense
• Tailwind Docs

创建全局应用的样式表，注意必须引入postcss-import插件以支持@import写法。

$ vim src/assets/css/main.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

项目主入口文件中引入全局样式表

$ vim src/main.js

import "@/assets/css/main.css"

安装TailwindCSS插件

TailwindCSS提供了可复用的第三方插件用于扩展Tailwind，插件会注册新的样式，让Tailwind使用JavaScript代替CSS注入用户的样式表。

$ npm i -D @tailwindcss/forms
$ npm i -D @tailwindcss/typography
$ npm i -D tailwindcss/aspect-ratio