godon019
11/20/2018 - 10:44 AM

storybook with css module

in create react app after install story book .storybook/webpack.config.js

webpack.config.js
content_copyfile_download
const cssModuleRegex = /\.css$/;

module.exports = {
  module: {
    rules: [
      {
        test: cssModuleRegex,
        loaders: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};
.md
content_copyfile_download
  • Rendered
  • Source

Solved Storybook with css-module problem

commit

with current version of storybook (4.1.6)

solved the problem with css-loader of CRA

coz in ILTAN-ART-APP it had a problem(probably older version of storybook)

so I solved it with workaround

solution was below

add webpack.config.js

to .storybook folder

const cssModuleRegex = /\.css$/;

module.exports = {
  module: {
    rules: [
      {
        test: cssModuleRegex,
        loaders: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};

but now with new version of storybook

I just don't need that and only need addons.js and config.js folder