如何设置 index.scss 并将变量、混合等的全局样式表导入到 Angular 6 库中?
Angular CLI 生成一个带有根组件和组件 scss 的库,但是添加或导入到根组件的样式对子组件不可用。默认情况下封装样式是有意义的,但我还找不到有关如何设置它的任何信息或示例。
angular.json "styles": [...]
可用于 "projectType": "application"
的路径,似乎没有与 "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
最佳答案
对于全局样式,我已经在this question中回答过了。 .
更新
适用于 ng-packgr
9.x 及以上版本
现在直接支持将 Assets 复制到输出文件夹,如 this page 中所述
{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"name": "@my/library",
"version": "1.0.0",
"ngPackage": {
"assets": [
"CHANGELOG.md",
"./styles/**/*.theme.scss"
],
"lib": {
...
}
}
}
因此在您的项目中,您可以通过以下方式从库中导入文件来使用样式:
@import '@my/library/path-to-file/file-name.scss'
或使用显式相对路径(确保根据需要尽可能使用../
)
@import '../node_modules/@my/library/path-to-file/file-name.scss'
旧答案
**对于其他版本**- 在您图书馆的根文件夹中创建一个
index.scss
文件。如果关注this guide from Angular ,那么你的路径将是my-project/projects/my-library/index.scss
。这也是您的package.json
所在的文件夹。
因此,index.scss
将是包含您的变量和混合的文件
$grey: #222;
@mixin mymixin {
background: #222;
}
- 使用
import
将其包含在您的库 scss 文件中
@import '../../index.scss';
或者你的组件 scss 文件所在的任何相对路径。
- 现在,为了在您的应用程序项目中包含此文件,将其复制到构建后的 dist 目录中。为此,请编辑您的 Angular 库项目的
package.json
文件(不是库的文件)。
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build && npm run copyScss",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"copyScss": "xcopy \"projects\my-library\index.scss\" \"dist\\my-library\\\""
},
...
}
现在,非常重要的是,不要使用
ng build
来构建您的库,而是使用npm run build
。这将自动执行复制命令。现在index.scss
文件与您的库一起导出到my-project/dist
文件夹中。在您的应用项目的 scss 文件中包含
index.scss
// ~ stands for the node_modules folder
@import '~my-library/index.scss';
现在,您在安装库的所有项目中都拥有了所有库混入。
干杯!
PS 变通办法不是最优雅的解决方案,但当其他方法都不起作用时,它们会变通!
关于Angular 6 库共享样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50582227/