title: css-loader changes id name in the result css file
body: <p>I am currently using <strong>storybook</strong> and I have problem with importing a CSS file for my custom component. I have a custom JS and CSS file that creates a custom HTML element and I import the JS file to my storybook.js file. </p>
  
  <p>This is my <code>webpack.config.js</code></p>
  
  <pre><code>module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
      ],
    },
  };
  </code></pre>
  
  <p>However, the problem is that when I inspect the component, one of my id selector change from</p>
  
  <pre><code>#my_id {
      position: relative;
      margin: 1rem 1rem;
      width: calc(100% - 2rem);
      height: 0.1rem;
  }
  </code></pre>
  
  <p>into something like this</p>
  
  <pre><code>#_2mi2YFOpgJGU5rtfy7l3RI {
      position: relative;
      margin: 1rem 1rem;
      width: calc(100% - 2rem);
      height: 0.1rem;
  }
  </code></pre>
  
  <p>Is there something that I need to do? I think the problem lies with the css loader</p>