Attach Styles to Document's Head using Rollup "rollup-plugin-postcss" Package

Web Dev

Fri Dec 30 2022

Rollup is module bundler for JavaScript which compiles small pieces of code into something larger and more complex. Plugins are needed with rollup so you can modify what is compiled and even target specific file extensions or part of your repository.

In this tutorial we will show how easy it is to get your CSS to be handled with PostCSS and to ensure the CSS is injected to the head the of your application. This will be useful if we prefer to add styles only when they are imported.

Inside your rollup.config.js you will need to import the "rollup-plugin-postcss" package and require or import the file.

const postcss = require("rollup-plugin-postcss");

Inside of the config then add postcss as a function so it is like

plugins: [

postcss({}),

If you build your application and then open it you should be able to see the CSS being attached to the head as the plugin's default is to inject to the head.