Closed maxlibin closed 7 years ago
Hi @maxlibin -- have you seen this documentation: https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config
It sounds like you need to apply the first part of your config to storybook's config, in a similar way to the "Simple Mode" example. You could extract it to a common JS file to do so.
@tmeasday I have this webpack.config.js in .storybook
@maxlibin -- I tried to reproduce the problem here: https://github.com/tmeasday/storybook-708, but it seems to be working.
Note this is an app created with create-react-app
so the SCSS doesn't actually work in the main app (no way to modify the webpack config), but the SCSS is working just fine in storybook.
Any ideas about what's different? Maybe you could fork the above and try and reproduce there?
I was also seeing issues with the storybook 2->3 upgrade. We use scss and cssmodules (without extract text plugin) and do not use create-react-app
. The loaders we specify in .storybook/webpack.config.js
seemed to be ignored, or at least the errors are identical if we have the custom webpack.config.js
or not. This approach worked with storybook 2.
The fix was to add the css/scss loaders to the exported module.rules
array :
module: {
rules: [
{
test: /\.s?css$/,
loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader'
}
]
}
};
Previously, we had the older (but still valid) loaders
array. I think do the config merging/overrides this was getting ignored due to storybook (correctly) using rules
. Hope this helps anyone in our situation.
@maxlibin did you ever sort it out? I might close this issue as @gthomas-appfolio's instructions are hopefully the solution for anyone else finding this, but we can reopen it if you haven't been able to solve the problem.
This issue has been fixed in 3.1.7
via https://github.com/storybooks/storybook/pull/1363 - extract-text-webpack-plugin
can now be used again in a standard storybook build.
I had the same issue and i fix it by adding scss loader to .storybook>webpack.config.js { test: /.scss$/, exclude: /node_modules/, loaders: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcss: [ precss(), autoprefixer(), mqpacker(), ], }, }, { loader: 'sass-loader' } ], }
yarn add -D react-scripts
worked for me
yarn add -D react-scripts
worked for me
Thanks @nataliepan , I tried almost all methods through research online, only your answer is suitable for me!
need help with "You may need an appropriate loader to handle this file type."
in compontent file:
import "../src/components/Header.scss";
here is my webpack config: