is it possible to use rollup for processing just css? - 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;
}

Answer 1

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

Answer 2

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