首页 文章

Angular 6库共享样式表

提问于
浏览 次
13

如何设置index.scss并将变量，mixins等的全局样式表导入角度6库？

Angular CLI生成具有根组件和组件scss的lib，但添加或导入到根组件的样式不可用于子组件 . 默认情况下，封装样式是有道理的，但我找不到任何关于如何设置它的信息或示例 .

使用 "projectType": "application" 可以使用的angular.json "styles": [...] 路径似乎也不适用于 "projectType": "library" .

在此先感谢您的帮助！

更新：我的项目是使用angular cli v6.0.5启动的，遵循本指南：https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

TL; DR指南：

ng new my-app --style=scss
ng generate library my-library --prefix ml

这是angular 6生成的文件结构：

my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts
        index.scss
        index.html
      README.md

包版本：

Angular CLI: 6.0.5
    Node: 10.2.1
    OS: darwin x64
    Angular: 6.0.3
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.6.5
    @angular-devkit/build-angular      0.6.5
    @angular-devkit/build-ng-packagr   0.6.5
    @angular-devkit/build-optimizer    0.6.5
    @angular-devkit/core               0.6.5
    @angular-devkit/schematics         0.6.5
    @angular/cli                       6.0.5
    @ngtools/json-schema               1.1.0
    @ngtools/webpack                   6.0.5
    @schematics/angular                0.6.5
    @schematics/update                 0.6.5
    ng-packagr                         3.0.0
    rxjs                               6.2.0
    typescript                         2.7.2
    webpack                            4.8.3
angular angular-cli libraries angular6 angular-cli-v6

2 回答

  • 0

    在项目上运行init，以便将项目初始化为角度cli项目

    编辑：我的不好，似乎他们从cli中删除了init你可以尝试新的--src

    它可能会覆盖所有文件，因此请在项目副本上尝试此操作

    回复于
  • 0

    您是否尝试将组件的封装级别设置为none，作为组件元数据的一部分？像这样：

    @Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

    ViewEncapsulation级别为：

    • ViewEncapsulation.Emulated ：默认情况下，Angular模拟Shadow DOM .

    • ViewEncapsulation.Native ：使用浏览器自己的Shadow DOM .

    • ViewEncapsulation.None ：样式是全局的

    看看Angular Docs on ViewEncapsulation，我写了一个blog post on it .

    回复于

相关问题