I am curious about whether Rollup can be used solely for processing CSS files, such as css, scss, less, etc. For example, if I have a file called index.css in my src folder (the entry folder) and want Rollup to process it in the dist folder (the output folder) like index.css but with processed content (e.g., imported .sass files or CSS variables). How can this be achieved?
Here is an 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;
}
In the dist folder, there should be an index.css file containing the code from both CSS files (and processed), resembling the following:
dist/index.cssh1 {
color: green;
}
h2 {
color: red;
}