How to use css preprocessors with angular 7

问题

I am new to the pre-processors world. How can I use them, in particular postcss and lostgrid, with angular 7.

I am trying to apply this code in angular. And as you can see it uses postcss-cssnext and lost-grid.

@use postcss-cssnext;
@use lost;

@lost flexbox flex;
@lost gutter 0;

//more css code

How can I use these in my angular app?

* EDIT *

You can use the above code without pre-processors. I edited the code like so: https://codepen.io/anon/pen/BeLWeb

回答1:

Right now angular cli not support building postcss so you have to write custom webpack to handle it.

You must use postcss-loader package here

and you have to use custom-webpack to do that. Example can be found here

Alternative soultions: Angular provide 3 pre processing css for you to use is sass,scss,less so you can choose base on your personal preference

To use angular cli with pre process css you can generate new angular cli project using

ng new my-app --style=scss

You can also set the --style flag with the following:

1. --style=scss
2. --style=sass
3. --style=less

Below is config in angular.json

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

You can in schematics section I have scss preprocess css option you can change into scss, less, or sass

You can read this article here for more info

来源：https://stackoverflow.com/questions/56113385/how-to-use-css-preprocessors-with-angular-7