Question

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

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

¿有任何线索吗？

Answer 1

到目前为止，我发现的唯一方法是在打包.tgz供内部使用之前，运行npm脚本复制dist文件夹中的sass文件（使用copyfiles）。

这是我的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。

¿如何使用？

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

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

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

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

Answer 2

更新Angular 9 ：

在库中，const FAQ = () => { const [isOpenAnswer, setIsOpenAnswer] = useState({}) const toggle = (id) => { setIsOpenAnswer(prevState => ({ ...prevState, [id]: !prevState[id], }); } return <Layout> <div className="questionsBox pb-5"> <h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2> {questions.map((q, index) => { return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}> <div className="d-flex justify-content-between"> <span className="questionTitle">{q.question}</span> <img className="questionIcon" src={Plus} alt="plus" onClick={() => toggle(q.id)} /> </div> {isOpenAnswer[q.id] && <p className="answer pt-2 pb-2"> {q.answer} <a href="" className="link">{q.source}</a> </p>} </div> })} </div> </Layout> }目录旁边，创建一个lib目录，然后将其作为资产添加到styles，如下所示：

ng-rollout.yaml

这会将在"assets": [ "styles/**/*.scss" ]目录中递归找到的所有SCSS文件复制到库输出目录中的styles目录中。

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

2 个答案: