¿Es posible crear un archivo CSS separado con angular-cli?

Solución:

¡Sí! En tus angular.json archivar lo que se suele hacer es

"styles": [
  "styles/bootstrap.scss",
  "styles/app.scss",
  "styles/whatever-else.scss"
]

y que todo se combina en un dist/styles.5d56937b24df63b1d01d.css archivo o como decida nombrarlo.

EN LUGAR DE puede utilizar la notación de objeto definida aquí

"styles": [
  {
    "input": "styles/bootstrap.scss",
    "bundleName": "bootstrap"
  },
  {
    "input": "styles/app.scss",
    "bundleName": "app"
  },
  {
    "input": "styles/whatever-else.scss",
    "bundleName": "foo-bar"
  },
]

y esto generará 3 archivos CSS separados:

• dist/bootstrap.*.css
• dist/app.*.css
• dist/foo-bar.*.css

Como @Rob señaló correctamente, puede usar flag --extract-css. Desafortunadamente, esta bandera no se puede usar con ng-serve desde Angular 6+.

Si desea extraer css en ambos ng build y ng-serve puedes editar angular.json archivo en la siguiente sección architect -> build -> options agregar nueva opción "extractCss": true

Puedes hacer esto usando --extract-css Bandera de ng build. Este es el valor predeterminado en --prod modo. Más detalles aquí: https://github.com/angular/angular-cli/wiki/build

---

---

Utiliza Nuestro Buscador