更新时间:2023-11-22 17:36:22
对于全局样式,我已经在这个问题中回答了.
For global styles, I've answered it in this question.
对于 ng-packgr
9.x 及以上版本
For ng-packgr
versions 9.x and above
现在直接支持将资源复制到输出文件夹,如 本页
Copying assest to output folder is now directly supported as explained in 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": {
...
}
}
}
index.scss
文件.如果您遵循 本指南来自 Angular,那么您的路径将是 my-project/projects/my-library/index.scss
.这也是您的 package.json
所在的文件夹.index.scss
file in your library's root folder. If you follow this guide from Angular, then your path will be my-project/projects/my-library/index.scss
. This is also the folder where your package.json
is.所以,index.scss
将是你的变量和 mixins 的文件
So, index.scss
will be the file with your variables and mixins
$grey: #222;
@mixin mymixin {
background: #222;
}
import
import
@import '../../index.scss';
或您的组件 scss 文件所在的任何相对路径.
or whatever relative path your component scss file is at.
package.json
文件(不是库的).package.json
file (NOT THE LIBRARY'S).{
"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
文件夹中.
Now, very important, DO NOT use ng build
to build your library, instead use npm run build
. This will automatically execute the copy command. Now the index.scss
file is exported along with your library in the my-project/dist
folder.
在应用项目的 scss 文件中包含 index.scss
Include the index.scss
in your app project's scss files
// ~ stands for the node_modules folder
@import '~my-library/index.scss';
现在,您在安装库的所有项目中都拥有了所有库 mixin.
Now you have all your library mixins in all of the projects you installed your library.
干杯!
PS 变通办法不是最优雅的解决方案,但当其他方法无效时,它们会变通!
PS Workarounds are not the most elegant solutions, but when nothing else works, they work around!