如何在Angle 7中使用CSS预处理器 [英] How to use css preprocessors with angular 7

问题描述

我是预处理器领域的新手.如何使用角度为7的它们，尤其是postcss和Lostgrid.

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

我正在尝试在角度应用此代码.如您所见，它使用 postcss-cssnext 和丢失的网格.

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?

*编辑*

您可以在没有预处理器的情况下使用以上代码.我这样编辑代码: https://codepen.io/anon/pen/BeLWeb

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

推荐答案

现在，角度cli不支持构建postcss，因此您必须编写自定义webpack来处理它.

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

您必须在此处

，您必须使用 custom-webpack 为此.可以在此处

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

替代方案:Angular提供了3个预处理的CSS，供您使用，因为ass，scss较少，因此您可以根据自己的喜好进行选择

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

要在预处理CSS中使用angular cli，可以使用生成新的angular cli项目

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

ng new my-app --style=scss

您还可以使用以下设置--style标志:

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

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

以下是angular.json中的配置

Below is config in angular.json

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

您可以在示意图部分中拥有scss预处理css选项，您可以将其更改为scss，less或sass

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

这篇关于如何在Angle 7中使用CSS预处理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！