title: Importing css in storybook causes postcss error
body: <p>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.</p>
  
  <pre><code>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 | 
  &gt; 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, '']];
  </code></pre>
  
  <p>CSS I am trying to load is</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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 <a href="https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640" rel="nofollow noreferrer">this</a>.</p>
  
  <p>I tried a bunch of different configurations using postcss.config.js</p>
  
  <p>This is the last one that is still in my git untracked file</p>
  
  <pre><code>module.exports = (ctx) =&gt; ({
      parser: require('postcss-safe-parser'),
      plugins: {
        autoprefixer: {
          browsers: ['last 2 versions'],
        },
      }
    });
  </code></pre>
  
  <p>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 <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs" rel="nofollow noreferrer">here</a>.</p>
  
  <p>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.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>EDIT: I should have specified how I am importing the css file. Here it is:</p>
  
  <pre><code>import  "./Button.css";
  </code></pre>