如何使用PostCSS插件与弹出的CRA和Storybook

Question

我有一个弹出的create-react-app with Storybook。为了使用一些额外的PostCSS插件，我添加了PostCSS嵌套，当我开始/构建cra项目时，一切都很好，但它不能与Storybook一起工作。看起来Storybook忽略了PostCSS，并将所有内容编译为简单的css。

我已经试着重写了，但是它不工作。

如果你能帮助我，我会很感激。

.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;
},
};

我试着创建一个单独的文件

module.exports = {
plugins: [
require('postcss-nested'),
]
};

Answer 1

看起来很正常

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;
},
};