我正在一个项目中,我们正在创建一个共享组件模块,以将其导入组织中的各种应用程序中。我们正在使用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为单个文件组件创建前缀样式?
答案 0 :(得分:1)
直到最新版本的Angular(6.x),此问题尚未解决(doc)。 Autoprefixer只能在多文件组件中应用
添加到@ Component.styles数组的样式字符串必须用CSS编写,因为CLI不能将预处理器应用于内联样式。