React 故事书 PostCSS 配置答案

【问题标题】：React storybook PostCSS configurationReact 故事书 PostCSS 配置
【发布时间】：2021-05-17 13:46:30
【问题描述】：

我正在为我的 React 应用程序设置一个故事书。我遇到了 PostCSS 的问题，显然我的故事书配置没有处理 PostCSS，并且我的样式被完全忽略了。

这是我的 package.json：

{

  ...

  "devDependencies": {

    "@storybook/addon-actions": "^6.2.8",

    "@storybook/addon-essentials": "^6.2.8",

    "@storybook/addon-links": "^6.2.8",

    "@storybook/addon-postcss": "^2.0.0",

    "@storybook/react": "^6.2.8",

    "css-loader": "2.1.1",

    "extract-css-chunks-webpack-plugin": "4.3.2",

    "postcss-cssnext": "^3.1.0",

    "postcss-csso": "^3.0.0",

    "postcss-loader": "^3.0.0",

    "style-loader": "^2.0.0"

  }

}

这是我的 main.js：

module.exports = {

  "stories": [

    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  ],

  "addons": [

    "@storybook/addon-links",

    "@storybook/addon-essentials",

    "@storybook/addon-postcss"
  ]
}

非常欢迎任何帮助。

【问题讨论】：

嘿@luthien，你有什么错误吗？你设法解决了吗？我有一些与 postcss 相关的问题。 You may need an additional loader to handle the result of these loaders 但我的项目是 VueJS + Nuxt。

标签： reactjs webpack storybook postcss postcss-loader

【解决方案1】：

尝试将postcss 升级到版本 8：

npm i -D postcss@8

然后，将您当前对main.js 文件中的@storybook/addon-postcss 的引用替换为：

{
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },

【讨论】：