Question

我包含scss文件，如下所示：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    ....,
    styleUrls: ['../../scss/dashboard_admin.scss'],
    encapsulation: ViewEncapsulation.None
})
export class DashboardAdminComponent implements OnInit {
.....

它正在将SCSS编译为CSS，但是在<styles>标记中加载样式，我希望将它们包含在单独的CSS文件中。

以下是来自.angular-cli.json

的SCSS相关配置

"defaults": {
     "styleExt": "scss",
     "component": {}
}

Answer 1

因为如果您的项目未配置为使用预处理器，则需要在CSS中包含已编译的styleUrls文件，如下所示：

styleUrls: ['path/to/compiled/css/dashboard_admin.css']

浏览器无法读取SCSS，SASS，LESS（等等），只需向其提供已编译的有效CSS文件。

但是，如果您想使用SASS，则需要在生成新项目时配置Angular CLI，或者您可以为现有项目执行此操作。

以下是一个很好的解释：https://stackoverflow.com/a/41541042/6053654

Angular CLI：将SCSS作为单独的文件加载到浏览器中

1 个答案: