Question

我知道汇总用于捆绑.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

是否可以使用汇总来处理CSS？

1 个答案: