css - 是否可以使用汇总来仅处理 css？

Question

我知道 Rollup 用于捆绑 .js 文件。但是是否可以仅使用它来处理 css？ (css、scss、less 等)。
我的意思是，如果我的 src 文件夹(入口文件夹)中有一个名为 index.css 的文件，并且我希望汇总在 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.css :

@import 'other';

h1 {
  color: green;
}

src/other.css

h2 {
  color: red;
}

并且在 dist 文件夹中应该是一个 index.css ，其中包含两个 css 文件(和已处理)的所有代码。
像这样的东西:
dist/index.css

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

Answer 1

你需要这样的东西

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',
      format: 'es'
    },
    plugins: [
      postcss({
        modules: true,
        extract: true
      })
    ]
  },
];

export default config