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!

cssnpmcommand-linecss-purge

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

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js

What is the process for choosing the 1st, 4th, 7th element, and beyond?

Is there a way to choose the 1st, 4th, 7th elements and so on? Also, how can I select the 3rd, 6th, 9th, and beyond? The method involves selecting an element then skipping two before selecting the third one. I believe the :nth-child selector is the key bu ...

csscss-selectors

Toggle the visibility of HTML elements by utilizing a JavaScript checkbox event

I have put together these JavaScript functions to hide the delivery address fields on my shopping cart address form if the goods are being sent to the billing address. The functions control the visibility of the HTML wrapped by... function getItem(id) { ...

javascriptcsscheckbox

Utilize Z-index to hide elements from view

Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...

htmlcssz-indexcss-transitions

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

Picture inside text area covering drop-down list

After making some adjustments to Bootstrap using a custom -theme.css file, I successfully altered the appearance of the dropdown menu. By removing the borders from the navbar and wrapping a header around it set to be fixed on top, everything seemed to be w ...

htmlcsstwitter-bootstrap-3

What is the most effective method for interacting with a Python script through the command line?

I regret if this is a replication, as my search query failed to yield the desired results. Typically, I terminate my python script by using its linux process ID. While this method has worked well for me thus far, I now find myself in need of pickling cer ...

pythoncommand-line

Difficulty with setting up Typescript in Visual Studio Code on MacOS Catalina

I'm currently facing an issue that appears to be related to the environment. How can I resolve it? And how do I link the installed TSC to my console? Steps to Recreate: npm install -g typescript was able to successfully install or update [email ...

node.jstypescriptnpmvisual-studio-codemacos-catalina

Alter the appearance of the mouse cursor when hovering over input fields in HTML

I am working with a variety of HTML elements that can be moved via Drag'n'Drop. In order to indicate to the user where these elements can be dropped, I change the cursor's appearance using CSS classes applied through JavaScript. This method ...

htmlcssdrag-and-dropmouse-cursor

Error message "##[error]The file specified is not found" is encountered while running Azure Pipelines "Cache@2"

In my current project, I have implemented Azure Pipelines to handle the builds. However, the build times were quite long, specifically 10-15 minutes, with a significant portion (5-10 minutes) spent on running "npm install". To optimize this process, I deci ...

npmazure-devopsazure-pipelinesazure-pipelines-build-task

Having trouble installing npm? Try running npm install lite-server -g to fix the issue

As soon as I press enter, this message appears. Modified 170 packages, and examined 171 packages in just 12 seconds There are 6 packages seeking funding. To learn more, execute npm fund No vulnerabilities were found ...

node.jsnpm

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

css

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

I'm currently facing challenges in removing a div upon successful AJAX completion. The issue I'm encountering is that the word "Added" appears twice after success, indicating that I am not properly selecting the two divs containing it. Any sugges ...

javascriptjqueryhtmlcss

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

javascripthtmlcss

Press and hold feature using CSS or JavaScript

When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place. ...

javascriptjquerycss

Combine the node_modules for the browser and preserve the integrity of the "app.js" file

When creating a js file that utilizes the npm node module greetings, I include it in my app.js for use in the browser using browserify: https://i.stack.imgur.com/r2WSh.jpg The structure of my index.html is as follows: https://i.stack.imgur.com/ggzMY.jpg ...

npmbrowserifynode-modules

How can you style an HTML tag using esc_html in CSS?

I've encountered an issue while editing the woocommerce orders.php template. This template is responsible for displaying the user's placed orders. I have identified several variables that require secure coding, such as $date_created or $view_orde ...

phphtmlcsswordpressescaping

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

javascripthtmlcss

Issues arising with the functionality of CSS media queries when used in conjunction with the

I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost. To ensure the responsiveness of the Spring webpage, I tested it ...

javahtmlcssspringjsp

External dependencies for hardhat (Solidity files)

I am working with a smart contract that includes the following import statements: import "@prb/contracts/PRBMathSD59x18.sol"; import "@openzeppelin/contracts/utils/Counters.sol"; import "@openzeppelin/contracts/access/Ownable.sol&q ...

npmsoliditysmartcontractshardhat