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.