Can't find global.css when importing css styles into storybook

Viewed 1097

I am attempting to create a storybook page which will display my CSS styling modules. I have looked at a few different methods and these are either deprecated or lead me to an error message.

I currently have a storybook/config.js which contains:

import requireContext from 'require-context.macro';
// automatically import all files ending in *.stories.js
//configure(require.context('../src/stories', true, /\.stories\.js$/), module);
import '../src/index.css';
import '../src/global/_global.css';

const req = requireContext('../src', true, /\.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

and a storybook/webpack.config.js which contains:

config.module.rules.push({
    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')
    ]
  });

This is code I found both in the Storybook documentation and on previous SO posts.

I am receiving the following error:

Module not found: Error: Can't resolve '../src/global/_global.css' 

I am wondering where I should be looking to find my global.css files? Or if this method is no longer a working solution.

All help is appreciated.

0 Answers
Related