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

Question

我创建了一个 Angular 库项目，我想在其中使用 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

到目前为止（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\"",

Answer 2

我知道已经很晚了，但也许可以帮助某人的想法。

1. 在与ng-package.json相同路径的库中创建style.scss。
2. 打开ng-package.json
3. 添加assets:["style.scss"]属性
4. 运行ng build @your-library-name --prod
5. 您将在您的dist/@your-library-name 中看到style.scss。
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。

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