Question

我创建了一个角度库项目，我想在其中使用SCSS样式。

所以我已经配置了

ng config schematics.@schematics/angular:component.styleext scss

这将进入 angular.json 文件

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
}

现在，我在库组件中使用materialize-css UI库。并且它需要导入其SCSS文件。

我没有看到 styles.scss 文件，可以在其中导入该文件以及我的组件和其他常见样式？

我尝试创建一个并输入 angular.json

"styles": ["projects/library_name/styles.scss"]

在projects-> library_name-> architect-> build-> options

下

但这在构建库项目时显示错误

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles).

更新

我得到了this，如果有帮助，我也解决了同样的问题！

Answer 1

我知道为时已晚，但也许可以帮助解决某人的想法。

在库中创建与 style.scss 路径相同的 ng-package.json。
打开ng-package.json
添加 assets:["style.scss"] 属性
运行ng build @your-library-name --prod
您将在 style.scss 中看到 dist/@your-library-name。
然后它是可导入的

_{ng-package.json}

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/logo-software/accordion",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "@logo-software/theme"
  ],
  "assets": [
    "style.scss"
  ]
}

如果您想在当前库中使用此 style.scss：将 encapsulation: ViewEncapsulation.None 添加到您图书馆的顶部主要 @Component。

_{accordion.component.ts}

@Component({
  selector: 'logo-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AccordionComponent implements OnInit {}

您现在可以在任何组件中使用此 style.scss 的最后一件事。

_{accordion.component.scss}

// `@import "~@logo-software/theme/style";` for external import

@import "../../style"; // path to the style.scss file

:host{
}

Answer 2

截止日期（2019年1月10日），尽管这是一种非常常见的情况，但库中没有对全局scss的直接支持。

通过此discussion，我得到了需要自己捆绑的解决方法。因此，我使用scss-bundle创建了一个大的scss文件。您可以使用

添加它

yarn add scss-bundle@next -D

然后绑定脚本并在监视模式下运行

"build-lib-watch-styles": "scss-bundle -e \"./projects/lib-name/src/lib/styles/lib-name.scss\" -d \"./dist-lib/lib-name/styles/lib-name.scss\" -w \"./projects/lib-name/src/lib/styles\"",

将SCSS与使用angular-cli创建的角度库一起使用

2 个答案: