如何在 Angular 7 中使用 css 预处理器

Question

我是预处理器领域的新手。我怎样才能使用它们，特别是 postcss 和 lostgrid，角度为 7。

我正在尝试以角度应用this code。如您所见，它使用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

Answer 1

目前 Angular cli 不支持构建 postcss，因此您必须编写自定义 webpack 来处理它。

你必须使用 postcss-loader 包here

你必须使用custom-webpack 来做到这一点。例子可以找到here

替代方案：Angular 提供 3 种预处理 css 供您使用，sass、scss、less，因此您可以根据个人喜好进行选择

要将 angular cli 与预处理 css 一起使用，您可以使用生成新的 angular cli 项目

ng new my-app --style=scss

您还可以使用以下内容设置 --style 标志：

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

下面是 angular.json 中的配置

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

您可以在原理图部分我有 scss 预处理 css 选项，您可以更改为 scss、less 或 sass

你可以阅读这篇文章here了解更多信息