Angular 6库共享样式表

如何设置index.scss并将变量、混合等的全局样式表导入angular 6库

Angular CLI使用根组件和组件SCS生成库，但添加或导入到根组件的样式对子组件不可用。默认情况下，封装样式是有意义的，但我只是找不到任何关于如何设置的信息或示例

angular.json

“styles”：[…]

路径可与

“projectType”：“application”

一起使用，但似乎与

“projectType”：“library”

也不兼容

提前感谢您的帮助

---

更新：我的项目是根据以下指南使用angular cli v6.0.5启动的：

TL；《指南》博士：

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

---

在项目上运行

ng init

，以便将项目初始化为Angular CLI项目

编辑： 糟糕的是，他们似乎从CLI中删除了

init

。您可以尝试

ngnew--src

---

它可能会覆盖某些文件，因此请在项目的副本上尝试此操作。

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

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

视图封装级别为：

• ViewEncapsulation.Emulated：默认情况下，Angular模拟阴影DOM
• 视图封装。本机：使用浏览器自己的阴影DOM
• 视图封装。无：样式是全局的

---

查看，我写了一篇。

我认为人们可能忽略了这样一个事实，即虽然存在封装选项，但全局样式在样式标记中输出，并且可以在整个项目中级联

以下是我的设置：

My global styles:styles.scs在样式标记中输出。这些规则以预期的所有匹配类和元素为目标。甚至在组件内部

组件样式被封装。这是他们的价值支柱。它们将覆盖全局样式，并将特定于构件的样式保留在构件族中

@includes

如variables.scss、mixins.scss等在需要时显式包含在任何组件.scss文件的顶部

@import'../../../../scss/includes/variables'

我们还需要什么呢？
对于全球风格，我已经回答了

更新
适用于
ng packgr
9.x及以上版本

现在直接支持将assest复制到输出文件夹，如中所述



旧答案
**对于其他版本**
在库的根文件夹中创建一个
index.scss
文件。如果您遵循，那么您的路径将是
myproject/projects/mylibrary/index.scss
。这也是存放
package.json
的文件夹
因此，
index.scss
将是包含变量和混合的文件

$grey:#222；
@mixin-mymixin{
背景：#222；
}

使用
import
@import'../../index.scss'；

或者组件scss文件所在的任何相对路径

现在，为了在应用程序项目中保存此文件，请在生成后将其复制到dist目录。为此，请编辑angular库的项目的
package.json
文件（而不是库的）
{
“名称”：“我的项目”，
“版本”：“1.0.0”，
“脚本”：{
“ng”：“ng”，
“开始”：“ng发球”，
“构建”：“ng构建和npm运行COPYSCS”，
“测试”：“ng测试”，
“皮棉”：“ng皮棉”，
“e2e”：“ng e2e”，
“copyScss”：“xcopy\”projects\my library\index.scss\“\”dist\\my library\\”
},
...
}

现在，非常重要的是，不要使用
ng build
来构建库，而是使用
npm run build
。这将自动执行复制命令。现在，
index.scss
文件将与库一起导出到
myproject/dist
文件夹中


在应用程序项目的scss文件中包含
索引.scss


/~表示节点\u模块文件夹
@导入“~my library/index.scss”；

现在，在安装库的所有项目中都有了所有库混合

干杯

PS变通办法不是最优雅的解决方案，但当其他办法都不起作用时，它们就可以解决
 看起来您没有使用@angular/cli创建项目，如果这是一个新项目，我强烈建议您使用它。@Ploppy我创建了，我使用此指南启动了该项目：我面临着完全相同的问题。你找到解决办法了吗？@BramW。不，我没有，我只是在我想使用commons的每个文件中添加了导入。表示这是ng packagr的一个限制，并指定了一个吞咽解决方法。我对必须引入gulp不感兴趣，因此我尝试过并正在考虑的另一个（非理想）选项是使用Angular CLI创建的“根”库组件来保存库的全局样式。它将有一个空模板，但带有
封装：ViewEncapsulation.None
，这将导致其样式添加到全局样式中。然后将（空）模板标记包含在应用程序中的某个位置。
指定的命令（“init”）无效。有关可用选项的列表，请运行“ng help”。
我的坏，似乎他们从cli中删除了init您可以尝试ng new--src它可能会覆盖so文件，所以请在project@JeffyHouiser如何将主题从library@IamStalker我很抱歉，我不理解您的问题视图封装。不应使用任何b/c。它仅在使用它的组件初始化后添加全局样式。因此，你可以得到一些奇怪的场景，应用程序的一些随机部分只有在你转到另一个完全随机的部分后才会中断
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "@my/library",
  "version": "1.0.0",
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}