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

问题描述

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

所以我已经配置了

ng 配置原理图.@schematics/angular:component.styleext scss

这进入了angular.json文件

原理图":{@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

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

架构验证失败，出现以下错误:数据路径"不应具有其他属性(样式).

更新

我收到了这个，如果有帮助，请解决同样的问题！>

解决方案

直到日期(2019 年 1 月 10 日，库中没有对全局 scss 的直接支持，尽管这是一个非常常见的场景.

从这个讨论，我得到了我需要捆绑它的解决方法我.所以我使用 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\"",

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

So I have configured

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

and this made an entry to angular.json file

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

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

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

I tried creating one and making entry into angular.json

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

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).

Update

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

解决方案

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.

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