rollup处理Css

1.安装postcss，rollup-plugin-postcss天然支持css modules，css extract，css预处理

pnpm i -D postcss postcss-preset-env rollup-plugin-postcss

// postcss.config.js
const presetEnv = require('postcss-preset-env')
module.exports = {
 plugins: [
   presetEnv({
     browsers: [
       "last 2 versions",
       "> 1%",
       "iOS 7",
       "last 3 iOS versions"
     ]
   })
 ]
}

postcss-preset-env 允许开发者使用最新的 CSS 语法而不用担心浏览器兼容性。
postcss-preset-env 会将最新的 CSS 语法转换为目标环境的浏览器能够理解的 CSS 语法。
postcss-preset-env 集成了 autoprefixer。

2.提取CSS

import path from 'path'
postcss({
  extract: true,
  // Or with custom file name
  extract: path.resolve('dist/my-custom-file-name.css')
})

3. CSS modules

postcss({
  modules: true,
  // Or with custom options for `postcss-modules`
  modules: {}
})

4. 预处理 Sass/Stylus/Less

• node-sass: yarn add node-sass --dev
• stylus: yarn add stylus --dev
• less: yarn add less --dev

5.css压缩

使用cssnano对打包后的css进行压缩