autoprefixer如何使用单文件组件在angular中工作

Question

我正在做一个项目，我们正在创建一个共享组件模块，以便在整个组织的各种应用程序中导入。我们正在使用css创建组件，使我们能够在应用程序中拥有一致的外观。我们的组织需要支持Internet Explorer 11。我们创建了一个网格组件，利用CSS网格进行布局和样式设计。在我们把它推到npm提要中，然后把它拉到我们的项目中之前，共享模块中的一切似乎都很好。我们注意到autoprefixer似乎停止了工作。当我进一步研究时，我发现单文件组件与多文件组件似乎存在问题。共享库的构建过程采用了我们的多文件组件，并将它们制成单个文件组件，而不是通过autoprefixer来放置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为单个文件组件创建前缀样式？

Answer 1

直到Angular(6.x(的最新版本，这个问题还没有解决(doc(。Autoprefixer只能应用于多文件组件

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