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

Question

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

所以我已经配置

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

这对angular.json文件做了一个条目

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

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

我看不到style.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).

更新

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

Answer 1

我知道为时已晚，但是，也许有助于某人的想法。

1. style.scss在库中创建与ng-package.json.
2. 打开 ng-package.json
3. 添加assets:["style.scss"]属性
4. 跑 ng build @your-library-name --prod
5. 你会style.scss在你的dist/@your-library-name.
6. 然后它是可导入的

_{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。

_{手风琴组件.ts}

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

现在你可以style.scss在任何组件上使用它的最后一件事。

_{手风琴.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 的直接支持，尽管这是一个非常常见的场景。

从这个讨论中，我得到了我需要自己捆绑它的解决方法。所以我过去常常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\"",