Rollup 中如何处理 CSS？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Rollup 中处理 CSS 通常需要使用插件。以下是推荐的步骤：

安装插件：首先，你需要安装一个 Rollup 插件来处理 CSS 文件。常用的插件是 rollup-plugin-postcss。
```
npm install rollup-plugin-postcss --save-dev
```

配置 Rollup：在 rollup.config.js 中配置插件，以便 Rollup 能够处理 CSS 文件。

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

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

导入 CSS：在你的 JavaScript 文件中导入 CSS 文件。
```
import './styles.css';
```
构建项目：运行 Rollup 构建命令，生成包含 CSS 的最终输出文件。
```
npx rollup -c
```

本题详细解读

为什么需要处理 CSS？

在 Rollup 中，默认情况下只能处理 JavaScript 文件。为了处理 CSS 文件，我们需要借助插件。CSS 文件通常用于定义样式，但在现代前端开发中，CSS 文件往往需要经过预处理、压缩、提取等操作，以便更好地与 JavaScript 代码集成。

使用 `rollup-plugin-postcss` 插件

rollup-plugin-postcss 是一个功能强大的插件，它允许你在 Rollup 中处理 CSS 文件。该插件支持以下功能：

CSS 提取：将 CSS 提取到单独的文件中，而不是将其嵌入到 JavaScript 文件中。
CSS 压缩：通过 cssnano 等工具压缩 CSS 文件，减少文件大小。
PostCSS 插件支持：支持使用 PostCSS 插件来处理 CSS，例如自动添加浏览器前缀、使用 CSS 变量等。

配置选项

在 rollup-plugin-postcss 中，常用的配置选项包括：

extract: true：将 CSS 提取到单独的文件中。如果设置为 false，CSS 将被嵌入到 JavaScript 文件中。
minimize: true：压缩 CSS 文件。
plugins: []：指定要使用的 PostCSS 插件。

导入 CSS 文件

在 JavaScript 文件中导入 CSS 文件时，Rollup 会通过 rollup-plugin-postcss 插件处理这些 CSS 文件。最终，CSS 文件会被提取到单独的文件中，或者嵌入到 JavaScript 文件中，具体取决于配置。

构建项目

运行 Rollup 构建命令后，Rollup 会根据配置文件处理所有文件，并生成最终的输出文件。如果配置了 extract: true，CSS 文件将被提取到单独的文件中，通常命名为 bundle.css。

通过以上步骤，你可以在 Rollup 中轻松处理 CSS 文件，并将其与 JavaScript 代码集成。

Rollup 中如何处理 CSS？