Storybook: Can't import css

[ziedhajsalah]

I am trying to use storybook for the first time. In my project I am using blueprintJs as UI library so to test my components I need to import the css file for blueprint.
According to the docs

CSS Support
You can simply import CSS files wherever you want, whether it’s in the storybook config file, a UI component, or inside a story definition file.

Basically, you can import CSS like this:

// from NPM modules
import 'bootstrap/dist/css/bootstrap.css';

// from local path
import './styles.css';
Note: this is plain CSS only. If you need a preprocessor like SASS, you need to customize the webpack config.

In the .storybook/config.js I added an import like this:

import { configure } from '@storybook/react';
import '@blueprintjs/core/dist/blueprint.css';

const req = require.context('../stories', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Unfortunatly that does not work and I got this error:

ERROR in ./node_modules/@blueprintjs/core/dist/blueprint.css
Module parse failed: /home/zied/projects/optimal-projects/optimal-compta-desktop/node_modules/@blueprintjs/core/dist/blueprint.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";
| /**
|  * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 @ ./.storybook/config.js 5:0-47
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

[ziedhajsalah]

Same thing after adding my custome css-loader to .storybook/webpack.config.js

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    loaders: [
      // add your custom loaders.
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

[Hypnosphi]

Try to add include: require.resolve('@blueprintjs/core') into loader config

[ziedhajsalah]

@Hypnosphi , same error.
I tried to copy the css file from the node_modules and put it in .storybook folder and import it and the same result, It does not import any css file from any directory.

[Hypnosphi]

That's weird. Are you using webpack 2 or higher? Storybook app should use its own dependency anyway though. Which @storybook/react version it is, by the way? I can't reproduce your issue with current storybook version on a clean project =(

[ziedhajsalah]

I am using webpack 3

[ziedhajsalah]

"@storybook/react": "^3.2.3"

[psimyn]

Since Blueprint also imports fonts, this could by failing due to a @font-face

Can you try adding file-loader or url-loader to your config?

{
  test: /\.(woff|woff2|eot|ttf|svg)$/,
  use: 'url-loader'
}

(from https://github.com/webpack-contrib/css-loader/issues/38)

You can also try rm -rf node_modules then reinstall.

Otherwise there is this ongoing css-loader issue that might one day have answers - https://github.com/webpack-contrib/css-loader/issues/355

[ziedhajsalah]

@psimyn , thank you. But I tried to import a css file that I created only to test this, it contains only one css rule about 3 lines:

body {
  font-size: 40;
}

and the same error persists.
I also moved from my own configuration to create-react-app and that does not change any thing.

[psimyn]

@ziedhajsalah that is odd - you get the @charset "UTF-8"; error with that 3 line CSS file?

Have you restarted storybook/webpack processes when making these changes? Do you have a repo somewhere to reproduce?

[ziedhajsalah]

Yes I restarted the process and also deleted the node_modules folder and rerun npm install and yarn . The Error is always

Module parse failed ...

This time is

ERROR in ./.storybook/style.css
Module parse failed: /home/zied/projects/optimal-projects/optimal-compta-desktop/.storybook/style.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|   font-size: 50;
|   font-family: sans-serif;
 @ ./.storybook/config.js 5:0-22
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

[psimyn]

change loaders to rules

 module: {
    rules: [
      // add your custom loaders.

[ziedhajsalah]

Nothing is changing!

[Hypnosphi]

Can you please create a GitHub repo with the same storybook setup as yours, so that we can maybe see what's not working?

[ziedhajsalah]

Ok, I wrapped it into create-react-app to make things simpler.
The repo

[Hypnosphi]

Things start working for me if I remove the empty webpack.config.js

[ziedhajsalah]

@Hypnosphi the same for me!!!

[Hypnosphi]

If I do this

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

it works for style.css, but not for external module. So I have to include all the project, and add url-loader for fonts:

const path = require('path');
const includePath = path.resolve(__dirname, '..');

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        include: includePath,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        include: includePath,
        use: 'url-loader'
      }
    ],
  },
};

[ziedhajsalah]

Thank you for the help @Hypnosphi . It worked finally.

[zhsisusie]

this problem gets me several hours, while i remove "include: path.resolve(__dirname, "..")" ,it works. sad!!!! why ?

[sudorake]

@zhsisusie I think it's due to symlinking. If locally linked to the dependency, you don't need the deeper include.