是否可以使用汇总来仅处理 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;
}

源代码/其他.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