如何在angular 8库中包含SASS样式

问题描述

我有一个角度库，用于在两个项目之间共享一些组件，指令和更多内容.

I had an angular library for sharing some components, directives and more between two projects.

最近，我试图在库中包含一些样式以在两个项目中重用，但是我可以实现ng build使其包含在捆绑软件中.

Recently I tried to include in the library some styles to reuse in the two projects but I can achieve to ng build include it in the bundle.

¿有任何线索吗?

推荐答案

我到目前为止发现的唯一方法是，在打包.tgz以便内部使用之前，运行npm脚本来复制dist文件夹上的sass文件(使用copyfiles).

The only way I found until now is to run an npm script to copy sass files on dist folder (using copyfiles) before package the .tgz for internal use.

这是我的package.json:

{
...
     "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "uiutils_build": "ng build my-library",
        "uiutils_styles": "copyfiles -f projects/my-library/src/scss/*.scss dist/@my-namespace/my-library/scss",
        "uiutils_pack": "cd dist/@my-namespace/my-library && npm pack",
        "uiutils_copy": "copyfiles -f dist/@my-namespace/my-library/*.tgz ../infraestructure.tourbitz.com/packages/@my-namespace/my-library",
        "uiutils_package": "npm run uiutils_build && npm run uiutils_styles && npm run uiutils_pack && npm run uiutils_copy"
      },
...
}

重要的脚本是uiutils_styles.

the important script is uiutils_styles.

¿如何使用?

在样式文件中，我包括了样式:

In my style files, I included the styles:

@import "~@my-namespace/ui-uitils/scss/my_style.scss";

对于注册全局样式，我在angular.json文件的项目部分进行了操作:

And for registering global styles I did on the project section of the angular.json file:

{
...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
"styles": [
              "node_modules/@my-namespace/my-library/scss/my_style.scss",
              "src/styles.scss"
            ],
...
},
...
}

这篇关于如何在angular 8库中包含SASS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！