storybook: Can't import css

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (8 by maintainers)

Most upvoted comments

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'
      }
    ],
  },
};

+28

Hypnosphi on Aug 6, 2017

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

Hypnosphi on Aug 6, 2017

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

psimyn on Aug 6, 2017

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

sudorake on Jul 16, 2018

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

ziedhajsalah on Aug 6, 2017

@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.

ziedhajsalah on Aug 5, 2017