CODEWITHSUNDEEP
angularsassangular-cliangular-library
Code Guru
Code Guru

Reputation: 15598

Bundling third party scss files into angular library created using angular-cli

I have created a angular library using angular-cli this has the further dependency on materialize-css. So I have mentioned materialize-css as peerDependencies in projects/lib-name/package.json.

Now as there is no direct support for global scss so I am using scss-bundle to bundle all the scss files into one and then copy the file into the dist folder of the library.

The structure for scss files

projects/lib-name/src/lib/sass/
   /common/_materialize-css.scss (this imports some of component's scss from materialize-css library)
   /lib-name.scss

and lib-name.scss imports /common/_materialize-css.scss

This is the script I have created in app's package.json

"watch-scss": "scss-bundle -e \"./projects/lib-name/src/lib/sass/lib-name.scss\" -d \"./dist-lib/lib-name/sass/lib-name.scss\" -w \"./projects/lib-name/src/lib/sass\""

But this is not resolving materialize-css scss files and showing the error

common\node_modules\materialize-css\sass\components\variables.scss [NOT FOUND]

lib-name.scss
[watch-scss] ├─┬ common\_materialize.scss
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\color-variables.scss [NOT FOUND]
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\variables.scss [NOT FOUND]
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\normalize.scss [NOT FOUND]
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\buttons.scss [NOT FOUND]

How can I solve this?

Upvotes: 2

Views: 5402

Answers (2)

Code Guru
Code Guru

Reputation: 15598

lib-name.scss

@import "./common/variables.scss";
@import "./common/materialize-config.scss";
@import "./common/materialize.scss";

/common/materialize.scss

@import "~materialize-css/sass/components/color-variables";
@import "~materialize-css/sass/components/variables";
@import "~materialize-css/sass/components/normalize";

As app and library share the same node_modules so I need to install the materialize-css library as well. I was just mentioning it in the lib's package.json (one that is going to publish).

As this is the main dependency so instead of mentioning it in peerDependencies, I mentioned it under the dependencies

{
  "name": "my-lib",
  "version": "0.0.1",
  "dependencies": {
    "materialize-css": "^1.0.0"
  },
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0"
  }
}

if you want to define dependencies then you need to white list this in ng-package.json (one that ng-packager uses while building the library) like this

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  // ----- 
  "whitelistedNonPeerDependencies": [
    "materialize-css"
  ]
}

to run watch mode with scss-bundle install the latest version using

yarn add scss-bundle@next -D

Upvotes: 0

SAURABH RATHOD
SAURABH RATHOD

Reputation: 303

change your angular.json file 

"schematics": {
        "@schematics/angular:component": {
          "styleext": "css"
        }
      },

replace with 

"schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },

and import your scss file in styles array 

"styles": [                  
              "src/styles.scss"
            ],

Upvotes: -1

Related Questions