Importing css in storybook causes postcss error

Question

I am trying to get storybook going for simple react components. I am trying to import a css file and I am getting the following error due to postcss.

ERROR in ./src/stories/Button/Button.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/stories/Button/Button.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??postcss!./Button.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

CSS I am trying to load is

.MuiButton-root {
    background-color: #6772e5;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 7px 14px;
}

.MuiButton-root:hover {
    background-color: #5469d4;
}

.MuiButton-label {
    color: #fff;
}

I have tried bunch of ways to get rid of postcss but it won't work. For example, I tried to filter out postcss loader using this.

I tried a bunch of different configurations using postcss.config.js

This is the last one that is still in my git untracked file

module.exports = (ctx) => ({
    parser: require('postcss-safe-parser'),
    plugins: {
      autoprefixer: {
        browsers: ['last 2 versions'],
      },
    }
  });

Do note that I am trying to load the css directly inside a typescript file which is inside my stories folder. I am using the mixed CSF way of specifying stories in typescript file and importing it into mdx file where I put in the documentation as specified here.

IMHO storybook pushes too much default configuration. There is no point in forcing postcss on those writing stories, it should be a choice. I am a newbie with postcss and I have wasted hours trying to get out of the woods for PoC. It is a big turn-off.

Any help would be appreciated.

EDIT: I should have specified how I am importing the css file. Here it is:

import  "./Button.css";

Importing css in storybook causes postcss error

0 Answers