The PurgeCSS CLI does not generate CSS files beyond the command line interface

I'm struggling to successfully extract my CSS using purgecss from the command line and save it to a separate file. The instructions on PurgeCSS.com are vague:

By default, the CLI only outputs the result in the console. To save the purified CSS files to a directory, you need to provide a specific output location:

purgecss --css css/app.css --content src/index.html "src/**/*.js" --output build/css/

Despite attempting various versions of the code above, I've either ended up printing the code in the command line or receiving an error message.

My attempted solutions:

purgecss --css bootstrap.css --font.css --juan.css --content index.html --output build/css/
purgecss --css bootstrap.css --font.css --juan.css --content index.html "assets" --output build/css/
purgecss --css bootstrap.css --font.css --content index.html "/assets" --output 

If anyone has insight on how to accurately save my CSS to a specific file, your help would be greatly appreciated!

Answer №1

If the destination folder does not already exist, PurgeCSS will trigger an error. Assuming your output directory is in place, your PurgeCSS script should run smoothly. It appears that PurgeCSS doesn't care if there is a trailing slash at the end of the directory path.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Change the color of the sections in a 3D pie chart on a Highcharts

I am looking to create a custom pie chart with two different colors: one for the main surface and another for the sides. Currently, I can only configure the lighter blue color for the main surface, but I would like to also change the darker blue color for ...

Issue with box-sizing border-box not applying to top and bottom borders

Currently, I am in the process of developing my own responsive website. However, I have encountered an issue with the box-sizing border-box on the top and bottom borders of one specific image. The layout consists of two columns with images of varying heigh ...

Tips for merging identical media queries into a single query using SASS

Previously, I organized my media queries in LESS by combining them at a single place like this LESS: .media-mixin(@break) when (@break = 1200px) { .abc{ color: red; } } .media-mixin(@break) when (@break = 1200px) { .xyz{ color: yellow; ...

Changing the height of one Div based on another Div's height

I currently have a display of four divs positioned side by side. I am seeking a solution to ensure that the height of each div remains consistent, and should adjust accordingly if one of them increases in size due to added text content. For reference, ple ...

What is the best way to create a fixed positioning for a div within a Material-UI table container?

When using the Material UI Table, I encountered an issue with applying the sticky property. The table itself works fine, but I also have a button inside the TableContainer that should be sticky alongside the table head. I attempted to achieve this by using ...

What is the most effective way to extract data from a .dpbox table using selectorgadget in R (rvest)?

Recently, I've been experimenting with web scraping data from different websites using selectorgadget in R. One successful example was when I extracted information from . My usual approach involves utilizing the selectorgadget Chrome extension to choo ...

Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...

Is there a tool available that can convert a cron schedule into a more user-friendly, easy-to-read format?

My search for an NPM package that can handle this task has been fruitless so far. I am in need of a cron library that can convert a monthly cron job into easily readable text. For example, inputting 0 0 14 * * should output "Monthly", rather than the curre ...

Troubleshooting issue with running npm start in GIT Bash

Encountered an error message while running the npm start command: [email protected] prestart C:\Project\myapp npm run build [email protected] build C:\Project\myapp tsc -p src/ [email protected] start C:&bsol ...

Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...

Dropdown button split aligned with its first button

Comparing the alignment of split button dropdowns in Bootstrap 3 and Bootstrap 4, I find that Bootstrap 3 aligns them to the left of the first button, while Bootstrap 4 only aligns them according to the second button. https://i.stack.imgur.com/gAt78.png h ...

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

Inquiries regarding ReactJS, NodeJS, and the NPM platform

Here are the key points I have gathered: ReactJS is a frontend framework that compiles into html/js/css files for modern browsers to recognize, leading to direct requests from the browser to the web host server for these static files; NodeJS functions as ...

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

What is preventing me from adjusting the height of this DIV element?

I'm completely stumped by what's happening here. I've been trying to increase the height of a DIV element with an id of #titleStrip, but it just won't budge. It's beyond frustrating. I thought I knew my way around this kind of thin ...

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

Adjusting height in CSS can be done dynamically based on the content within

Currently, I am working on a project where I need the submenu to adjust based on content. The issue is that right now, the submenu has a fixed capacity of 4 items. For example, when you click on 'sale', it displays 4 submenu items perfectly. Howe ...

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

How can you adjust the arrow placement to be at the bottom of the full-height container just before the fold?

Is there a way to position the arrow at the bottom of the container? I'm using Bootstrap-5 and struggling with getting the right positioning attributes. The arrow keeps sticking with the other text content. Any tips or guidance on how to achieve this ...