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 webpack-contrib/css-loader#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 - webpack-contrib/css-loader#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.

[kdgyimah]

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

To use your CSS in all stories, you simply import it in .storybook/preview.js
Source: Storybook: Importing CSS files

[72gm]

I'm using version 6.3.12 and anything I've wanted to import from Node modules I've had to do in the introduction mdx... preview.js doesn't work for me... looking at all the comments this really should be simpler.... i.e. handled by Storybook

Edit: .... which is obviously no good when you come to package up your library for npm