CODEWITHSUNDEEP
reactjsconfigurationbabeljscss-modulesstorybook
Italik
Italik

Reputation: 696

CSS-modules with storybook module not found

I've installed in my react project storybook v5. Everything seems to be ok, but when I want to import styles to my react component (I use postcss-modules) I have an error Module not found: Error: Can't resolve './styles/Buttons'. What should I add to storybook config to make it workable? I use babel in my project.

Upvotes: 0

Views: 3757

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53964

You need to customize Storybook’s webpack set up by adding webpack.config.js.

For example adding SASS:

// @ webpack.config.js

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$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });

  // Return the altered config
  return config;
};

Check out the docs.

Upvotes: 0

Related Questions