typescript - Πώς να χρησιμοποιήσετε προεπεξεργαστές CSS με το Angular 7

Είμαι καινούριος στον κόσμο των προ-επεξεργαστών. Πώς μπορώ να τους χρησιμοποιήσω, ειδικά το postcss και το lostgrid, με το angular 7;

Προσπαθώ να εφαρμόσω αυτόν τον κώδικα στο Angular. Και όπως μπορείτε να δείτε, χρησιμοποιεί postcss-cssnext και lost-grid.

@use postcss-cssnext;
@use lost;

@lost flexbox flex;
@lost gutter 0;

//more css code

Πώς μπορώ να χρησιμοποιήσω αυτά στην εφαρμογή μου Angular;

* ΕΠΕΞΕΡΓΑΣΙΑ *

Μπορείτε να χρησιμοποιήσετε τον παραπάνω κώδικα χωρίς προ-επεξεργαστές. Επεξεργάστηκα τον κώδικα ως εξής: https://codepen.io/anon/pen/BeLWeb

Απάντηση #1

Αυτή τη στιγμή το Angular CLI δεν υποστηρίζει την κατασκευή PostCSS, οπότε πρέπει να γράψετε προσαρμοσμένο webpack για να το χειριστεί.

Πρέπει να χρησιμοποιήσετε το πακέτο postcss-loader εδώ

και πρέπει να χρησιμοποιήσεις custom-webpack για να το κάνεις αυτό. Παράδειγμα μπορεί να βρεθεί εδώ

Εναλλακτικές λύσεις: Το Angular παρέχει 3 προ-επεξεργαστές CSS για να χρησιμοποιήσετε, που είναι το sass, scss, less, έτσι ώστε να μπορείτε να επιλέξετε ανάλογα με την προσωπική σας προτίμηση

Για να χρησιμοποιήσετε το angular cli με προεπεξεργασία css μπορείτε να δημιουργήσετε ένα νέο έργο angular cli χρησιμοποιώντας

ng new my-app --style=scss

Μπορείτε επίσης να ορίσετε τη σημαία --style με τα ακόλουθα:

--στυλ=scss
--στυλ=sass
--στυλ=λιγότερο

Παρακάτω είναι η διαμόρφωση στο angular.json

  "projects": {
    "awesome": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

Μπορείτε στην ενότητα διαγραμμάτων που έχω επιλογή προεπεξεργασίας css scss να την αλλάξετε σε scss, less ή sass

Μπορείτε να διαβάσετε αυτό το άρθρο εδώ για περισσότερες πληροφορίες