我正在尝试将Storybook v5.0与我的项目一起使用,我正在使用React + Webpack4 + CSS模块。 (我没有使用CreateReactApp)
我的设置非常简单,我能够在没有CSS模块的情况下设置Storybook。
但是,如果我尝试编辑自定义故事书webpack配置以支持CSS模块,则会出错。
当我运行npm run storybook
时,我得到的错误是:
ERROR in ./src/components/Test/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src!./src/components/Test/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(2:1) Unknown word
1 |
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js!./index.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];
在我的package.json
:
"@storybook/addon-actions": "^5.0.0",
"@storybook/addons": "^5.0.0",
"@storybook/react": "^5.0.0",
我的.storybook/webpack.config.js
在他们的网站上跟随这个例子,看起来像这样:
const path = require("path");
const stylesLoaders = [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[path]__[local]--[hash:base64:5]"
}
},
"postcss-loader"
];
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loaders: stylesLoaders,
include: path.resolve(__dirname, "../")
}
]
}
};
任何帮助将不胜感激,因为我想使用最新版本的故事书!
我对新故事书(v5)也有同样的问题。最后,我必须在.storybook / webpack.config.js中传播config和config.module后才能工作。
因此,使用Storybook的文档,我使用了webpack而不是对象的函数:https://storybook.js.org/docs/configurations/custom-webpack-config/
这是一个例子:
module.exports = ({ config }) => ({
...config,
module: {
...config.module,
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use:[
{
loader: require.resolve("babel-loader"),
options: {
presets: [["react-app", { flow: false, typescript: true }]]
}
}
],
include: path.resolve(__dirname, "../")
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options: { sourceMap: true }
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]__[hash:base64:5]"
}
},
{
loader: require.resolve("postcss-loader"),
options: {
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-inline-svg"),
require("postcss-svgo"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
],
flexbox: "no-2009"
})
]
}
}
],
include: path.resolve(__dirname, "../")
}
]
}
});
我希望它能帮到你:)