Using SCSS with angular library created using angular-cli

Question

I have created an angular library project where I want to use SCSS for styles.

So I have configured

ng config schematics.@schematics/angular:component.styleext scss

and this made an entry to angular.json file

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

Now I am using materialize-css UI library in my library components. And it requires to import its SCSS file.

I am not seeing styles.scss file where I can import this and my components and other common styles?

I tried creating one and making entry into angular.json

"styles": ["projects/library_name/styles.scss"]

Under projects -> library_name -> architect -> build -> options

but this is showing error while building the library project

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles).

Update

I got this, addressing the same issue if it helps!

Gareth

For angular 13+ it's now: "style" : "scss" – Defeatism

You can import any file into your angular.json "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"] – Spout

Answer 1

Till the date (10-Jan-2019, there is no direct support for global scss in the library even though this is a very common scenario.

From this discussion, I got the workaround that I need to bundle it myself. So I used scss-bundle to create one big scss file. You can add it using

yarn add scss-bundle@next -D

and then the script to bundle and run in watch mode

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

Gareth

Answer 2

I know it was late but, maybe help with somebody's idea.

1. Create style.scss in the library which the same path with the ng-package.json.
2. Open ng-package.json
3. Add assets:["style.scss"] property
4. run ng build @your-library-name --prod
5. You will see style.scss in your dist/@your-library-name.
6. Then it is importable

_{ng-package.json}

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/logo-software/accordion",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "@logo-software/theme"
  ],
  "assets": [
    "style.scss"
  ]
}

If you want to use this style.scss in your current library: Add encapsulation: ViewEncapsulation.None to the top main @Component of your library.

_{accordion.component.ts}

@Component({
  selector: 'logo-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AccordionComponent implements OnInit {}

And the last thing you can use now this style.scss at any component.

_{accordion.component.scss}

// `@import "~@logo-software/theme/style";` for external import

@import "../../style"; // path to the style.scss file

:host{
}

Anabranch

We have it set up this way as well but I am having trouble with SCSS changes triggering --watch. It LOOKS like the library recompiles but the dist folder isn't getting the changes. Did your solution work with watch? – Clap