将SCSS与使用angular-cli创建的角度库一起使用 [英] Using SCSS with angular library created using angular-cli

问题描述

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

I have created an angular library project where I want to use SCSS for styles.

所以我已经配置了

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

这进入了 angular.json 文件

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

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

Now I am using materialize-css UI library in my library components. And it requires to import its SCSS file.

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

I am not seeing styles.scss file where I can import this and my components and other common styles?

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

I tried creating one and making entry into angular.json

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

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

Under projects -> library_name -> architect -> build -> options

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

but this is showing error while building the library project

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

更新

我得到了这，如果有帮助的话，也解决了同样的问题！/p>

I got this, addressing the same issue if it helps!

推荐答案

直到该日期(2019年1月10日)，尽管这是一种非常常见的情况，但库中没有对全局scss的直接支持.

Till the date (10-Jan-2019, there is no direct support for global scss in the library even though this is a very common scenario.

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

From this discussion, I got the workaround that I need to bundle it myself. So I used scss-bundle to create one big scss file. You can add it using

yarn add scss-bundle@next -D

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

and then the script to bundle and run in watch mode

"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创建的角度库一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！