@jogaram/build-ng-packagr-styled
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    Angular Library Build Architect for ng-packagr with SASS/SCSS bundling

    How to use

    1. Angular library generation

      Angular 6 defines projects in angular.json file. If you have already generated your lib, jump to step 3.

      $ ng generate library my-new-library

    2. Change builder processor in angular.json file:

      Locate you library and change builder:

          "my-new-library": {
                "root": "projects/my-new-library",
                "sourceRoot": "projects/my-new-library/src",
                "projectType": "library",
                "prefix": "smb",
                "architect": {
                  "build": {
                    ----- "builder": "@angular-devkit/build-ng-packagr:build",
                    +++++ "builder": "@jogaram/build-ng-packagr-styled:build",
                    "options": {
                      "tsConfig": "projects/my-new-library/tsconfig.lib.json",
                      "project": "projects/my-new-library/ng-package.json"
                    },
                    "configurations": {
                      "production": {
                        "project": "projects/my-new-library/ng-package.prod.json"
                      }
                    }
                  },
                  "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                      "main": "projects/my-new-library/src/test.ts",
                      "tsConfig": "projects/my-new-library/tsconfig.spec.json",
                      "karmaConfig": "projects/my-new-library/karma.conf.js"
                    }
                  },
                  "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                      "tsConfig": [
                        "projects/my-new-library/tsconfig.lib.json",
                        "projects/my-new-library/tsconfig.spec.json"
                      ],
                      "exclude": [
                        "**/node_modules/**"
                      ]
                    }
                  }
                }
              }
    3. Define your library SASS/SCSS index file:

              "my-new-library": {
                    "root": "projects/my-new-library",
                    "sourceRoot": "projects/my-new-library/src",
                    "projectType": "library",
                    "prefix": "smb",
                    "architect": {
                      "build": {
                        "builder": "@jogaram/build-ng-packagr-styled:build",
                        "options": {
                          "tsConfig": "projects/my-new-library/tsconfig.lib.json",
                          "project": "projects/my-new-library/ng-package.json"
                          +++++ "stylesIndex": "projects/my-new-library/src/index.scss"
                        },
                        "configurations": {
                          "production": {
                            "project": "projects/my-new-library/ng-package.prod.json"
                          }
                        }
                      },
                      "test": {
                        "builder": "@angular-devkit/build-angular:karma",
                        "options": {
                          "main": "projects/my-new-library/src/test.ts",
                          "tsConfig": "projects/my-new-library/tsconfig.spec.json",
                          "karmaConfig": "projects/my-new-library/karma.conf.js"
                        }
                      },
                      "lint": {
                        "builder": "@angular-devkit/build-angular:tslint",
                        "options": {
                          "tsConfig": [
                            "projects/my-new-library/tsconfig.lib.json",
                            "projects/my-new-library/tsconfig.spec.json"
                          ],
                          "exclude": [
                            "**/node_modules/**"
                          ]
                        }
                      }
                    }
                  }
          ```
          
    4. Build library

      $ ng build my-new-library or $ ng build --prod my-new-library

    5. You are done!

      You should now see in dist generated package an index.scss or index.sass file with all your styles bundled.

    Install

    npm i @jogaram/build-ng-packagr-styled

    DownloadsWeekly Downloads

    2

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    26.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • jogaram