[Angular] Styles in .css files are not applied

Issue details

Styles in .css files are not applied to Storybook’s iframe:

I wrote the following component with styleUrls:

/* my-button.component.ts */
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-button',
  templateUrl: './my-button.component.html',
  // use `styleUrls`: styles are not applied...
  styleUrls: ['./my-button.component.css'],
})
export class MyButtonComponent {
}

and

/* my-button.component.css */
p {
  color: red;
}

But the component rendered by Storybook is not applied this style ( the font-color is black).

And I use not styleUrls but styles:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-button',
  templateUrl: './my-button.component.html',
  // use `styles`: red color applied
  styles: [`
    p {
      color: red;
    }
  `],
})
export class MyButtonComponent {
}

then, the component gets red colored.

Steps to reproduce

I’ve created the reproducing repo:

git clone https://github.com/Quramy/storybook-ng-css.git
cd storybook-ng-css
npm run storybook

Please specify which version of Storybook and optionally any affected addons that you’re running

@storybook/angular: 3.3.3

And:

@angular/core: 5.1.2
@angular/cli: 1.5.4

Issue Analytics

State:
Created 6 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

igor-dvcommented, Jan 3, 2018

I think start from the docs/src/pages/basics/guide-angular/index.md =)

1reaction

Quramycommented, Jan 3, 2018

@igor-dv Thanks for your reply.

Styles in .css(or .scss) files are applied with the following webpack config:

/* .storybook/webpack.config.js */

const genDefaultConfig = require('@storybook/angular/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  // Add .scss rule
  config.module.rules.unshift({
    test: /\.scss$/,
    loaders: ['raw-loader', 'sass-loader'],
  });

  // Overwrite default .css rule
  const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString() === '/\\.css$/');
  if (cssRule) cssRule.exclude = /\.component\.css$/;

  return config;
};