CODEWITHSUNDEEP
angularionic-frameworkionic2
rakete
rakete

Reputation: 3051

How to load SCSS of a component without @import

I developed a small floating action component. The component consists of a .ts, .html and a .scss-file. At the moment I import the scss file into the app.scss.

Is there a way to load the SCSS automatically when using the component?

Upvotes: 1

Views: 212

Answers (1)

drew moore
drew moore

Reputation: 32680

I assume you're aware of the styles andstyleUrls properties on ComponentMetadata.

AFAIK, you can't pass a raw, uncompiled .scss file in through styleUrls, but it's fairly easy to set up your module loader to handle the compilation step for you transparently.

This is particularly true if your module loader is webpack: See here for one example of a webpack configuration that allows you to add scss files anywhere in your app and then use them like so:

@Component( {
  selector     : "app",
  styles       : [ require( './app.scss' ) ],    
  template     : `<route-view></route-view>`,
} )
export class AppContainer {}

Upvotes: 3

Related Questions