CODEWITHSUNDEEP
angularsassangular-library
Abdullah Qudeer
Abdullah Qudeer

Reputation: 989

Use same Styling files (.SCSS) for multiple angular 8 projects

I Have different projects developed in angular 8 and have same styling.

I want to use same SCSS files so that in future changes can be made at one place.

I have tried below but this is not working for me.

Compiling css in new Angular 6 libraries

Please guide to right direction.

Upvotes: 0

Views: 2701

Answers (2)

Abdullah Qudeer
Abdullah Qudeer

Reputation: 989

My issue was resolved with the help of @qiAlex's answer , but here I am posting complete procedure to resolve these kind of issues.

I got below solution from https://github.com/linnenschmidt/build-ng-packagr.

These kind of problems can be resolved through creating an angular library but the default angular build architect @angular-devkit/build-ng-packagr for ng-packagr doesn't copy assets of libraries.

@linnenschmidt/build-ng-packagr can be used to copy assets of library. This Angular Build Architect will copy all assets in library build.

How to install

Install @linnenschmidt/build-ng-packagr into your angular project.

npm install @linnenschmidt/build-ng-packagr --save-dev

or

yarn add @linnenschmidt/build-ng-packagr --dev

How to use

I). Replace the build architect of your libraries by @linnenschmidt/build-ng-packagr:build.

 "architect": {
        "build": {
          "builder": "@linnenschmidt/build-ng-packagr:build",

II). Add your assets glob rules to the options section like as you normally do for apps.

 "options": {
            "tsConfig": "projects/weave-styles/tsconfig.lib.json",
            "project": "projects/weave-styles/ng-package.json",
            "assets": [
              "src/assets"
            ]
          }

A final angular.json file could look like the following example:

"weave-styles": {
      "projectType": "library",
      "root": "projects/weave-styles",
      "sourceRoot": "projects/weave-styles/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@linnenschmidt/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/weave-styles/tsconfig.lib.json",
            "project": "projects/weave-styles/ng-package.json",
            "assets": [
              "src/assets"
            ]
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/weave-styles/src/test.ts",
            "tsConfig": "projects/weave-styles/tsconfig.spec.json",
            "karmaConfig": "projects/weave-styles/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/weave-styles/tsconfig.lib.json",
              "projects/weave-styles/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }

Upvotes: 0

qiAlex
qiAlex

Reputation: 4346

For example you can:

  1. Create your npm or yarn package (it can be private) with styles.
  2. Use it as a package.json dependency to a different projects
  3. Profit )

Useful links:

https://docs.npmjs.com/creating-and-publishing-private-packages

https://docs.npmjs.com/creating-and-publishing-an-org-scoped-package

Other option can be:

  1. create single angular project with one package.json and angular.json
  2. have different project in different folders
  3. have common styles inserted in every project
  4. have different commands in package.json to run different projects (on different ports if you need it to run at the same time)
  5. have different configurations in angular.json for different projects

Upvotes: 1

Related Questions