0

I am working on a simple website with HTML, CSS and JavaScript. The styles are grouped as follows:

@import './variables.css';
@import "./bootstrap-overrides.css";
@import "./utils/utils.css";
@import './elements/elements.css';
@import './elements/title.css';
@import './elements/button.css';
@import './elements/input.css';
@import './modules/nav.css';
@import './modules/toggle-theme.css';
@import './modules/theme-search.css';
@import './modules/toggle-fullscreen.css';

Is there a way to concatenate and minify the styles, so that they all end up in a single file, say styles.min.css, for the production environment?

alejandro
  • 389
  • 2
  • 13
  • Does this answer your question? [How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)](https://stackoverflow.com/questions/13713273/how-to-concatenate-and-minify-multiple-css-and-javascript-files-with-grunt-js-0) – SteeveDroz Oct 19 '22 at 13:22
  • Thanks, any link with a Webpack solution? – alejandro Oct 19 '22 at 13:24
  • This is generally accomplished using build tools; as I write this in 2022, I think the most popular solution is still probably [webpack](https://webpack.js.org/) using the [CSS minifier plugin](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/). This can be a bit of a chore, but there are plenty of tutorials available out there-- a quick Google search found [this tutorial](https://web.dev/minify-css/) that looks promising. – Alexander Nied Oct 19 '22 at 13:24
  • Yes: https://stackoverflow.com/questions/35471538/how-do-i-concatenate-and-minify-files-using-webpack – SteeveDroz Oct 19 '22 at 13:26

0 Answers0