1

How to combine multiple CSS files into a single output file?

In SASS, this was done in a SCSS file by adding in other SCSS files via the @use method.

I have found that this can be done by adding in package.json itself with "cat" to concatenate files from a directory. However I'd like more control than that. I want to specify which files, in which order and perhaps have more than one output file for different sets of inputs.

Is there something I could add to module.exports that would allow me to list input and output files or something like that?

{
  "name": "postcss-boo",
  "version": "1.0.0",
  "description": "PostCSS configuration for BOO",
  "main": "index.js",
  "scripts": {
    "build:css": "postcss src/root.css --dir dist",
    "concat:css": "cat src/* > src/all.css",
    "watch:css": "postcss src/root.css --dir dist --w"
  },
  "keywords": [],
  "author": "BOO",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "cross-env": "^10.0.0",
    "cssnano": "^7.1.1",
    "postcss": "^8.5.6",
    "postcss-cli": "^11.0.1",
    "postcss-preset-env": "^10.3.0",
  }
}

Config:

const postcssPresetEnv = require("postcss-preset-env");
const postcssSortMediaQueries = require("postcss-sort-media-queries");
const cssNano = require("cssnano");

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 1 }),
    cssNano(),
  ],
};
Improve this question
5
  • 1
    You can use @import - npmjs.com/package/postcss-import, developer.mozilla.org/en-US/docs/Web/CSS/@import . Basically create a file that imports other styles. You can customize the import order and select which files to import that way. And use the postcss-import plugin that will inline those imports the specified order. Commented Aug 23 at 13:40
  • @brc-dd I did read something on that a few minutes ago. The thing is, import is an official css rule. I thought there would be a more appropriate way to do this by defining rules in some way. Ideally I'd like to do this with the js files as well. Commented Aug 23 at 13:45
  • 2
    If you want to do it from JS, you can write some custom script to read the files and create a concatenated string and call postcss programmatically to generate output bundle. Another alternative can be to use some bundler that supports importing css files in JS. But @import is a pretty standard way. It's similar on lightningcss too (lightningcss.dev/bundling.html), and other plugins also exist for postcss - github.com/csstools/postcss-plugins/tree/main/plugin-packs/… which also use @import. Commented Aug 23 at 13:49
  • With vite, you can do something like this - stackblitz.com/edit/vitejs-vite-nrpff5hk?terminal=dev (run npm run build) Commented Aug 23 at 13:59
  • @brc-dd I found the post-css bundler plugin. I made another error with my config file so just spent the last three hours trying to work out why nothing was happening. All sorted. This method will do. Thanks, Commented Aug 23 at 15:15
Related questions
2
Weird `:local` in `CSS` output file
15
Watch multiple css files with postcss and output a bundle.css
1
awk concatenate lines of files and files into single file
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.