When I import each css file in my JavaScript, I want it to generate a new css file for the build. For example:
import "./app.css";
import "./admin.css";
This would result in creating dist/app.css and dist/admin.css. My configuration file for rollup looks like this:
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
import postcssImport from "postcss-import";
import postcssNested from "postcss-nested";
import autoprefixer from "autoprefixer";
const dev = process.env.WP_ENV === "development";
export default {
input: "src/main.js",
output: {
sourcemap: dev,
format: "iife",
name: "main",
file: "dist/main.bundle.js",
},
plugins: [
resolve({
browser: true,
}),
postcss({
plugins: [postcssImport(), postcssNested(), autoprefixer()],
extract: true,
sourceMap: "inline",
minimize: !dev,
}),
commonjs(),
!dev && terser(),
],
watch: {
clearScreen: false,
},
};