In addition to the Storybook for React setup, you'll also need to install these packages:
npm i -D @babel/core babel-loader css-loader style-loader
In addition to the Storybook for React setup, you'll also need to install these packages:
npm i -D @babel/core babel-loader css-loader style-loader
const path = require('path'); | |
module.exports = { | |
webpackFinal: async (baseConfig, options) => { | |
// Modify or replace config. Mutating the original reference object can cause unexpected bugs. | |
const { module = {} } = baseConfig; | |
const newConfig = { | |
...baseConfig, | |
module: { | |
...module, | |
rules: [...(module.rules || [])] | |
} | |
}; | |
// TypeScript with Next.js | |
newConfig.module.rules.push({ | |
test: /\.(ts|tsx)$/, | |
include: [ | |
path.resolve(__dirname, '../components'), | |
path.resolve(__dirname, '../stories') | |
], | |
use: [ | |
{ | |
loader: 'babel-loader', | |
options: { | |
presets: ['next/babel'], | |
plugins: ['react-docgen'] | |
} | |
} | |
] | |
}); | |
newConfig.resolve.extensions.push('.ts', '.tsx'); | |
// | |
// CSS Modules | |
// Many thanks to https://github.com/storybookjs/storybook/issues/6055#issuecomment-521046352 | |
// | |
// First we prevent webpack from using Storybook CSS rules to process CSS modules | |
newConfig.module.rules.find( | |
rule => rule.test.toString() === '/\\.css$/' | |
).exclude = /\.module\.css$/; | |
// Then we tell webpack what to do with CSS modules | |
newConfig.module.rules.push({ | |
test: /\.module\.css$/, | |
include: path.resolve(__dirname, '../components'), | |
use: [ | |
'style-loader', | |
{ | |
loader: 'css-loader', | |
options: { | |
importLoaders: 1, | |
modules: true | |
} | |
} | |
] | |
}); | |
return newConfig; | |
} | |
}; |
// If you need global CSS, you can import it here and Storybook will automatically include it in all stories. | |
// You don't need this if you don't have any global CSS. | |
import '../src/styles.css'; |
@kris10cabrera Yes |
Thanks. Last question, is Typescript required to use storybook with NextJS? @justincy |
@kris10cabrera I don't believe there's anything special you need to do in order to use Storybook with Next.js if you're not using Typescript. |
Thank you @justincy |
thaaaanks @justincy postcss-loader
|
my hero |
Thanks |
Thank you I use scss so I replace CSS module part with this ↓
|
Brilliant, thanks for the guide @justincy! |
Is there a way to handle SCSS modules? I've created a "componentname.module.scss" file, and it works in NextJS but can't seem to get it to load in Storybook! |
@RichardBosworth See the comment by trinwin about SCSS. |
Am I right in thinking that the above only applies to the global SCSS file? I'm trying to get Storybook specifically to work with CSS Modules but using SCSS instead of plain CSS. So my Component file references an "import styles from './componentfile.module.scss'. Everything works great when I use just plain CSS Modules. But when I try to use sass-loader to load the modules, it throws an error. If I try to pass the options in your original posting to sass-loader, it says that they're incorrect. |
I don't believe so. The code snippet appears to be loading both scss and css module files and then explicitly including one global css file. Did you try it? |
So the solution was:
Adding the sass-loader after the css-loader modules bit. Also adding the (s*)css bit. |
thanks |
Thanks @justincy! |
addition of this for: postcss-loader@4.0.4
|
I managed to get SCSS modules working with {
name: '@storybook/preset-scss',
options: {
cssLoaderOptions: {
modules: {
auto: true
}
}
}
}, Global style import also works in https://github.com/storybookjs/presets/tree/master/packages/preset-scss EDIT: I added the |
The clean solution, thanks @drskullster |
Thanks @justincy! I'm experiencing some issues with Storybook not applying directives (e.g., Do you have any ideas about this, and do they work for you? |
@andymeek I don't use
|
This worked for me too! thanks @drskullster |
Below is the config I used to get css-modules to work with tailwind + scss + anything you put in postcss- the same as in the SPA via Next.js v10. const removeIndex = newConfig.module.rules.findIndex(
(rule) => rule.test.toString() === "/\\.css$/"
);
if (removeIndex !== -1) {
newConfig.module.rules.splice(removeIndex, 1);
}
newConfig.module.rules.push({
test: /\.(s*)css$/,
loaders: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: { auto: true },
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
config: path.resolve(__dirname, "..", "postcss.config.js"),
},
},
},
"sass-loader",
],
}); This is my package.json: "devDependencies": {
"@storybook/react": "6.1.11",
"css-loader": "5.0.1",
"postcss": "8.2.1",
"postcss-flexbugs-fixes": "5.0.2",
"postcss-import": "14.0.0",
"postcss-loader": "4.1.0",
"postcss-preset-env": "6.7.0",
"sass": "1.30.0",
"sass-loader": "10.1.0",
"style-loader": "2.0.0"
} As a result, I was able to use both tailwind and scss syntax in my css modules: .disabled {
@apply hover:shadow-none;
@extend .non-interactive;
} Make sure you import your global css files in preview.js, the same way your |
Thanks @justincy A config for NextJS Absolute Imports and Module path aliases somewhere convenient in next-preset.js baseConfig.resolve.alias = {
...baseConfig.resolve.alias,
"@/components": path.resolve(__dirname, "../components"),
}; |
This comment has been minimized.
@justincy thanks for this. Where do
main.js
,next-preset.js
, andpreview.js
go? Inside of.storybook/
?