is it possible to use rollup for processing just css?

Question

I know that Rollup is used to bundle .js files. But is it possible to use it just to process css? (css, scss, less, etc). What i mean is if i had for example in my src folder (the entry folder) a file called index.css and i want rollup to precess it at dist folder (the output folder) like index.css (but processed, for example if there is an imported .sass file or css variables). How can i do this?

Example 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;
}

and in the dist folder should be an index.css with the all the code for both css files (and processed). Something like this: dist/index.css

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

score 10 · Answer 1 · edited Nov 20 '22 at 12:43

10

You need something like this

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

edited Nov 20 '22 at 12:43

kleinfreund

6,546
4
30
60

answered Apr 02 '19 at 18:59

Iván López Acosta

211
3
8

6

If I use the output option `file`, I get always the warning `The emitted file "Filename.css" overwrites a previously emitted file of the same name.` And if I use the `dir` option instead of the `file` option, I got also an almost empty js file. Is there a way to avoid the warning or not to write the js file? – Jon Jul 02 '20 at 10:14
You can use the rollup-plugin-delete library - https://github.com/vladshcherbin/rollup-plugin-delete - – Ricardo Canelas Jul 03 '20 at 11:31

score 1 · Answer 2 · answered Apr 22 '22 at 16:44

Just to add to the answer of @Iván and if anyone else gets the error message The emitted file "Filename.css" overwrites a previously emitted file of the same name.:

The postCSS plugin has the option extract: true (like also shown in Iváns answer). When set to true it will create a separate CSS file. So what you can basically do is the following:

Create JS file
Import your styles in the JS file (e.g.: import "../css/index.css" ##Adapt path to your needs)
Now add postCSS to your plugin config:

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

This will output a separate CSS file.

Now add the CSS file to your template

Extra: A full config could look like this:

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(),
    ],
  },
];

is it possible to use rollup for processing just css?

2 Answers2