如何使用 rollup-plugin-postcss 插件？

推荐答案

// www.javascriptcn.com code example
// rollup.config.js
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      plugins: [
        autoprefixer() // 使用 autoprefixer 插件
      ],
      extract: true, // 将 CSS 提取到单独的文件
      minimize: true // 压缩 CSS
    })
  ]
};

本题详细解读

1. 安装依赖

首先，你需要安装 rollup-plugin-postcss 插件以及 autoprefixer 插件：

npm install rollup-plugin-postcss autoprefixer --save-dev

2. 配置 Rollup

在 rollup.config.js 文件中，引入 rollup-plugin-postcss 插件，并在 plugins 数组中配置它。你可以通过 plugins 选项来添加 PostCSS 插件，例如 autoprefixer。

3. 插件选项

• plugins: 这是一个数组，用于指定要使用的 PostCSS 插件。例如，autoprefixer 可以自动为 CSS 添加浏览器前缀。

• extract: 如果设置为 true，插件会将 CSS 提取到一个单独的文件中，而不是将其内联到 JavaScript 文件中。

• minimize: 如果设置为 true，插件会压缩生成的 CSS 文件。

4. 使用示例

假设你的项目结构如下：

src/
  main.js
  styles.css

在 main.js 中，你可以导入 CSS 文件：

import './styles.css';

运行 Rollup 后，styles.css 会被处理并提取到 dist 目录中，同时会被自动添加浏览器前缀并压缩。