如何将全局样式添加到angular 6/7库

Question

我试图以与angular应用程序相同的方式添加全局样式，但它完全不起作用。

我的库的名称是example-lib，所以我将styles.css添加到/projects/example-lib/。我在主angular.json文件中添加了样式：

...
"example-lib": {
"root": "projects/example-lib",
"sourceRoot": "projects/example-lib/src",
"projectType": "library",
"prefix": "ngx",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/example-lib/tsconfig.lib.json",
"project": "projects/example-lib/ng-package.json",
"styles": [
"projects/example-lib/styles.css" <!-- HERE 
],
},
...

但当我尝试使用命令构建库时：

ng build example-lib

我得到错误：

Schema validation failed with the following errors:
Data path "" should NOT have additional properties(styles)

我想这是在单独的库中添加全局样式的另一种方法。有人能帮我吗？

Answer 1

我有一个解决方法。只需在没有视图封装的情况下创建库的根组件，它的所有样式都将是全局的。

我的库.组件.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'lib-my-library',
templateUrl: './my-library.component.html',
styleUrls: ['./my-library.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

mylibrary.component.html

<!-- html content -->

我的库.组件.scss

@import './styles/core.scss';

现在您的mylibrary.component.scss和core.scs是全局

样式/core.scs

body {
background: #333;
}

core.scs是可选的，我只是喜欢保持根文件的干净。

---

更新：如果你也想要你的混合项和变量，那么按照这个答案。

Answer 2

正如@codeepic已经指出的，目前有一个标准的解决方案。

在ng-package.json中添加

"assets": ["./styles/**/*.css"]

提供的路径应该是指向文件的路径。同时，它们将是/dist文件夹中的路径
在生成时，文件将被复制到/dist。库的用户将能够按如下方式将它们添加到其全局样式中。

/* styles.css */
@import url('node_modules/<your-library-name>/styles/<file-name>');

通过这种方式，您可以复制任何类型的文件。

附言：当与CSS一起使用时，不要忘记您可以创建一个index.CSS文件，该文件可以像node_modules/<your-library-name>/styles一样导入。

Answer 3

在新的Angular 6库中编译css：

1. 在我们的库中安装一些devDependencies，以便捆绑css：

   • ng包装
   • scss束
   • ts节点

2. 创建css-bundle.ts:

   import { relative } from 'path';
   import { Bundler } from 'scss-bundle';
   import { writeFile } from 'fs-extra';
   /** Bundles all SCSS files into a single file */
   async function bundleScss() {
   const { found, bundledContent, imports } = await new Bundler()
   .Bundle('./src/_theme.scss', ['./src/**/*.scss']);
   if (imports) {
   const cwd = process.cwd();
   const filesNotFound = imports
   .filter(x => !x.found)
   .map(x => relative(cwd, x.filePath));
   if (filesNotFound.length) {
   console.error(`SCSS imports failed nn${filesNotFound.join('n - ')}n`);
   throw new Error('One or more SCSS imports failed');
   }
   }
   if (found) {
   await writeFile('./dist/_theme.scss', bundledContent);
   }
   }
   bundleScss();
   

3. 在库的/src目录中添加_theme.scss，该库实际上包含并导入我们想要捆绑的所有css。

4. 添加postbuild npm脚本以运行css-bundle.ts

5. 将其包含在angular.json 中应用程序的样式标签中

Answer 4

从此问题解决方案

将cpx和scss-bundle作为开发人员依赖项安装到package.json。然后在您的package.json"scripts"属性中添加以下条目：

"scripts": {
...
"build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
"build-mylib-styles": "cpx "./projects/mylib/src/lib/style/**/*" "./dist/mylib/style" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
"cp-mylib-assets": "cpx "./src/assets/**/*" "./dist/mylib/assets"",
...
}

将"mylib"替换为您的真实库名称，然后在您的终端build-mylib中运行即可。这将把你的scs资产编译到你的dist文件夹中。

您在实际的Angular项目中使用这些全局样式，只需将它们导入到项目设置中的angular.json文件中即可：

"styles": [
"src/styles.scss",
"dist/my-shiny-library/_theme.scss"
],

(如果您的项目在同一工作区中，则使用dist；如果是导入的库，则使用node_moduled(

Answer 5

1-确保您将样式放入库中

示例：

项目/你的库名称/assets/styles.css

2-然后在你的ng-package.json中(当然在lib中(放入资产规则

{
"$schema": ...  , 
"dest": ...   , 
>     "assets": [
>         "./assets/*"
>       ],
"lib": ...
}

3-在您的应用程序中，您可以使用此资产

"styles": [
"../your-lib-name/assets/styles.css"
]

这是教程