Cómo integrar PurgeCSS con el proyecto Angular CLI

Este post fue analizado por expertos para garantizar la veracidad de nuestro contenido.

Solución:

Hay otra forma que está más en línea con Angular CLI y Webpack config:

Necesitas instalar

npm install -D @angular-builders/custom-webpack postcss-scss @fullhuman/postcss-purgecss

Luego crea un webpack.config.js archivo de configuración:

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = 
  module: 
    rules: [
      
        test: /.scss$/,
        loader: 'postcss-loader',
        options: 
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('autoprefixer'),
            purgecss(
              content: ['./**/*.html'],
              // Example to let PurgeCss know how to exclude cdk and mat prefixes if your using Angular CDK and Angular Material
              whitelistPatterns: [/^cdk-)
          ]
        
      
    ]
  
;

Entonces cambia tu angular.json archivo para usar estas nuevas configuraciones:

...
"build": 
  "builder": "@angular-builders/custom-webpack:browser",
  "options": 
    "customWebpackConfig": 
      "path": "webpack.config.js"
    ,
    ...
  
,
...

Asegúrese de ejecutar esta configuración solo en modo de producción, cuando empaquete la aplicación final.

Espero que esto ayude.

Creé una publicación para explicar cómo en detalle: https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Creé este script bash para usar PurgeCSS con mi aplicación Angular. ¡Redujo el tamaño de mi archivo ‘styles.css’ de 63kb a solo 3kb! Espero que funcione para usted también.

Pasos:

1. crear un nuevo archivo llamado purgecss.sh dentro de la carpeta de tu proyecto
2. inserte el código de abajo en purgecss.sh expediente
3. correr ./purgecss.sh de CLI

#!/bin/bash

# run production build
ng build --prod --output-hashing none

# go to the dist/yourProjectName folder
cd ./dist/yourProjectName

# make a new directory named 'css' (you can name it anything)
mkdir css

# run PurgeCSS & make a new '.css' file inside the 'css' directory
purgecss --css ./styles.css --content ./index.html ./*.js --out ./css

# replace the 'dist/yourProjectName/styles.css' file with the 'dist/yourProjectName/css/styles.css' file
mv ./css/styles.css ./styles.css

# delete the previously created 'css' directory
rm -r css

Simplemente puede ejecutar los siguientes comandos en el directorio raíz de su proyecto

npm i -D postcss-import postcss-loader postcss-scss
ng add ngx-build-plus

En angular.json, realice los siguientes reemplazos en "architect" sección:

"builder": "@angular-devkit/build-angular:browser" con "builder": "ngx-build-plus:browser" por debajo "build",

"builder": "@angular-devkit/build-angular:dev-server" con "builder": "ngx-build-plus:dev-server" por debajo "serve",

"builder": "@angular-devkit/build-angular:karma" con "builder": "ngx-build-plus:karma" por debajo "test",

También debe agregar "extraWebpackConfig": "webpack.config.js" bajo opciones en las secciones respetadas.

---

---

Utiliza Nuestro Buscador