I tried react-scripts@next 2.0.0-next.66cc7a90 (create-react-app v2) because support for css modules has been added. Unfortunately, css modules are ignored by storybook. Any quick fix I could do?
Add a comment
|
2 Answers
My solution was to create a webpack.config.js in the .storybook folder to enable css modules.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: false,
},
},
],
},
{
test: /\.module\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
};
1 Comment
eagor
still getting error
SyntaxError (1:1) Unknown word > 1 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--11-1!./style.module.css");Use Storybook preset addon to add CSS Modules capabilities.
How to use css-modules with storybook 6
Installation
npm install -D storybook-css-modules
Configuration
Next, update .storybook/main.js to the following:
// .storybook/main.js
module.exports = {
stories: [
// ...
],
addons: [
// Other Storybook addons
"storybook-css-modules", // 👈 The addon registered here
],
};
