能否只使用Rollup来处理CSS？

Question

我知道 Rollup 通常用于打包 .js 文件，但是是否可以只使用它来处理 CSS（css、scss、less 等）呢？

我的意思是，如果我在 src 文件夹（入口文件夹）中有一个名为 index.css 的文件，并且我希望 Rollup 处理它并将其输出到 dist 文件夹中（输出文件夹），就像 index.css 一样（但是经过处理，例如包含导入的 .sass 文件或 css 变量）。我该如何实现这个目标呢？

例如 rollup.config.js：

import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'

const config = [
  {
    input: 'src/styles/index.scss',
    output: {
      file: 'dist/style.css',
      name: "style",
    },
    plugins: [
      postcss({
        plugins: []
      })
    ]
  },
];

export default config

src/index.scss:

@import 'other';

h1 {
  color: green;
}

src/other.scss

h2 {
  color: red;
}

在dist文件夹中，应该有一个包含两个CSS文件的所有代码（已处理过）的index.css文件，格式如下： dist/index.css

h1 {
  color: green;
}
h2 {
  color: red;
}

- Renzo Muzi Alvarado

Answer 1

您需要这样的东西。

import postcss from 'rollup-plugin-postcss'

const config = [
  {
    input: 'src/styles/index.scss',
    output: {
      file: 'dist/style.css',
      format: 'es'
    },
    plugins: [
      postcss({
        modules: true,
        extract: true
      })
    ]
  },
];

export default config

- Iván López Acosta

---

如果我使用file选项输出，我总是会收到警告消息：The emitted file "Filename.css" overwrites a previously emitted file of the same name.如果我使用dir选项代替file选项，则还会得到一个几乎为空的js文件。有没有办法避免这个警告或者不写入js文件？ - Jon

您可以使用 rollup-plugin-delete 库 - https://github.com/vladshcherbin/rollup-plugin-delete - - Ricardo Canelas

Answer 2

补充一下@Iván的答案，如果有人遇到错误信息The emitted file "Filename.css" overwrites a previously emitted file of the same name.：

postCSS插件有一个选项extract: true（如Iván的答案中所示）。当设置为true时，它将创建一个单独的CSS文件。因此，您可以基本上执行以下操作：

1. 创建JS文件
2. 在JS文件中导入样式（例如：import "../css/index.css"##根据您的需要调整路径）
3. 现在将postCSS添加到您的插件配置中：

...
plugins: [
      postcss({
        modules: true,
        extract: true
      }),
      resolve({
        jsnext: true,
        browser: true,
      }),
      commonjs(),
      production && terser(),
    ],
...

这将输出一个单独的CSS文件。

4. 现在将CSS文件添加到您的模板中

额外信息：完整的配置可能如下所示：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";

const production = !process.env.ROLLUP_WATCH;

export default [
  {
    input: "project/static/src/inputs/index.js",
    output: [
      {
        format: "esm",
        name: "map",
        file: "project/static/src/outputs/index.min.js",
      },
    ],
    plugins: [
      postcss({
        modules: true,
        extract: true
      }),
      resolve({
        jsnext: true,
        browser: true,
      }),
      commonjs(),
      production && terser(),
    ],
  },
];

- shadow