Angular2 Module Level Stylesheets

Apply CSS at module level in angular 2

No, right now you can't do that. It is a pending feature (See this and this).

However you can apply style to bootstrapped component of your module with /deep/ strategy. See this for more info

Angular 2 share the same css file across the module

Yes you can. Simply create a file, shared.scss for example. Now you can import it in you components style: @import './styles/shared.scss'; You could also add it to your styleUrls in your component.

separate styles for separate module in Angular 5

I found the solution. We can disable or enable css files in component.

document.styleSheets[2].disabled = false;

or

document.styleSheets[2].disabled = true;

that's it.

How to bundle Angular 2 component css?

I managed to achieve this with webpack and a special angular2-template-loader plugin. This is the config from webpack 2:

module: {
   rules: [
   {
      test: /\.ts$/,
      use: ['awesome-typescript-loader', 'angular2-template-loader']
   }

Basically what it does, it replaces templateUrl and styleUrls with inline template and styles and just stores them in a string as a separate "module".

How does it work

The angular2-template-loader searches for templateUrl and styleUrls
declarations inside of the Angular 2 Component metadata and replaces
the paths with the corresponding require statement. If keepUrl=true is
added to the loader's query string, templateUrl and styleUrls will not
be replaced by template and style respectively so you can use a loader
like file-loader.

The generated require statements will be handled by the given loader
for .html and .js files.

P.S. The whole set up can be found in Anagular tutorial.

---

Related Topics