自动前缀如何与单个文件组件成角度地工作?

时间:2018-07-30 18:37:50

标签: angular angular-cli autoprefixer

我正在一个项目中,我们正在创建一个共享组件模块,以将其导入组织中的各种应用程序中。我们正在使用css创建组件,从而使我们在整个应用程序中具有一致的外观。我们的组织需要支持Internet Explorer11。我们使用CSS Grid创建了一个网格组件以进行布局和样式设置。在共享模块中,一切似乎都运行良好,直到我们将其推送到npm feed,然后将其拉入我们的项目。我们注意到自动前缀程序似乎停止工作。当我进一步研究时,我发现单文件组件与多文件组件似乎是一个问题。共享库的构建过程采用了我们的多文件组件,并将它们变成了单个文件组件,并且没有通过自动前缀将css放入。 (库和构建是由@ angular / cli生成的,其示例如下:https://netbasal.com/create-angular-libraries-in-no-time-using-schematics-513cb1e08a5e


多文件组件

如果我有两个文件,如下所示: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div id="grid1" role="grid">
      <div role="columnheader">Column 1</div>
      <div role="columnheader">Column 2</div>

      <div role="gridcell">Row 1 Cell 1</div>
      <div role="gridcell">Row 1 Cell 2</div>

      <div role="gridcell">Row 2 Cell 1</div>
      <div role="gridcell">Row 2 Cell 2</div>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app.component.css

#grid1 {
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-template-columns: repeat(2, min-content);
}

Autoprefixer正确创建了前缀:

display: -ms-grid;
display: grid;
-ms-grid-rows: (min-content)[2];
grid-template-rows: repeat(2, -webkit-min-content);
grid-template-rows: repeat(2, min-content);
-ms-grid-columns: (min-content)[2];
grid-template-columns: repeat(2, -webkit-min-content);
grid-template-columns: repeat(2, min-content);

单个文件组件

如果我只有一个文件,如下所示: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div id="grid1" role="grid">
      <div role="columnheader">Column 1</div>
      <div role="columnheader">Column 2</div>

      <div role="gridcell">Row 1 Cell 1</div>
      <div role="gridcell">Row 1 Cell 2</div>

      <div role="gridcell">Row 2 Cell 1</div>
      <div role="gridcell">Row 2 Cell 2</div>
    </div>
  `,
  styles: [`
    #grid1 {
      display: grid;
      grid-template-rows: repeat(2, min-content);
      grid-template-columns: repeat(2, min-content);
    }
  `]
})
export class AppComponent {
}

Autoprefixer似乎被绕过,浏览器使用的样式为:

display: grid;
grid-template-rows: repeat(2, min-content);
grid-template-columns: repeat(2, min-content);

有没有办法让autoprefixer为单个文件组件创建前缀样式?

1 个答案:

答案 0 :(得分:1)

直到最新版本的Angular(6.x),此问题尚未解决(doc)。 Autoprefixer只能在多文件组件中应用

  

添加到@ Component.styles数组的样式字符串必须用CSS编写,因为CLI不能将预处理器应用于内联样式。