Storybook: CSS-Modules don't work with storybook

[krsnaa]

If you use https://github.com/ro-savage/react-scripts-cssmodules with create-react-app to incorporate CSS-Modules, storybook does not register the styles. The styles work perfectly when running directly on react.

[ndelangen]

That script extends/overrides the webpack config of CRA.
https://github.com/ro-savage/react-scripts-cssmodules/blob/master/config/webpack.config.dev.js

Provide storybook with the relevant webpack config, and it should work too.
https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode

[cdtinney]

Note that you don't have to use Full Control Mode.

You can just set the options for css-loader:

e.g., in .storybook/webpack.config.js:

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

[ndelangen]

Thanks for posting your working solution @cdtinney ♥️

[mkamranhamid]

@cdtinney thanks man you are a lifesaver

[EntityB]

I have ecountered that localIndent configuration has changed for css loader. My currently working configuration of webpack.config.js is something like:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
        test: /\.scss$/,
        loaders: [
            require.resolve('style-loader'),
            {
                loader: require.resolve('css-loader'),
                options: {
                    importLoaders: 1,
                    modules: {
                        mode: 'local',
                        localIdentName: '[path][name]__[local]--[hash:base64:5]',
                        // localIdentName: '[sha1:hash:hex:4]',
                        context: path.resolve(__dirname, 'src'),
                        hashPrefix: 'my-custom-hash',
                    },
                },
            },
            require.resolve('sass-loader')
        ],
    });

    // Return the altered config
    return config;
};

[murtazahuzaifa]

is there a way to use all style formats like ( .css, .scss, .module.css, .module.scss ) in a single project, I tried it to do like the code shown below, but not working.

main.js
`const path = require('path');

module.exports = {
"stories": [
"../src//.stories.mdx",
"../src//.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
'@storybook/preset-create-react-app',
],

webpackFinal: async (config, { configType }) => {
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need
config.module.rules.push({
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});

config.module.rules.push({
  test: /\.module.scss$/,
  use: ['style-loader', 'css-loader?modules=true', 'sass-loader?modules=true'],
  include: path.resolve(__dirname, '../'),
});

// Return the altered config
return config;

},
};`