I have an ejected create-react-app with Storybook. In order to use some additional PostCSS plugins, I've added postcss-nested and everything works fine when I start/build the cra project but it doesn't work with Storybook. It looks like Storybook ignores PostCSS and compiles everything as simple css.
I've tried to rewrite it but it doesn't work.
I'll be grateful if you help me.
.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
webpackFinal: async config => {
config.module.rules.push({
test: /\.module\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-nested'],
},
},
},
],
include: __dirname,
});
config.resolve.modules.push(process.cwd() + '/node_modules');
config.resolve.modules.push(process.cwd() + '/src');
config.resolve.symlinks = false;
return config;
},
};
And I tried to create a separate file
module.exports = {
plugins: [
require('postcss-nested'),
]
};
It looks like it's working
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
webpackFinal: async config => {
config.module.rules.push({
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
// ident: 'postcss',
options: {
ident: 'postcss',
plugins: [require('postcss-nested')],
},
},
],
include: __dirname,
});
config.resolve.modules.push(process.cwd() + '/node_modules');
config.resolve.modules.push(process.cwd() + '/src');
config.resolve.symlinks = false;
return config;
},
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.