Question

我正在尝试让故事书使用简单的React组件。我正在尝试导入一个css文件，由于postcss我收到以下错误。

ERROR in ./src/stories/Button/Button.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/stories/Button/Button.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--10-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??postcss!./Button.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

我正在尝试加载的CSS

.MuiButton-root {
    background-color: #6772e5;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 7px 14px;
}

.MuiButton-root:hover {
    background-color: #5469d4;
}

.MuiButton-label {
    color: #fff;
}

我尝试了很多方法来摆脱postcss，但是它不起作用。例如，我尝试使用this过滤出postcss loader。

我使用postcss.config.js尝试了一堆不同的配置

这是仍在我的git未跟踪文件中的最后一个

module.exports = (ctx) => ({
    parser: require('postcss-safe-parser'),
    plugins: {
      autoprefixer: {
        browsers: ['last 2 versions'],
      },
    }
  });

请注意，我正在尝试将CSS直接加载到我的Storys文件夹内的打字稿文件内。我正在使用混合CSF的方式在打字稿文件中指定故事并将其导入到我按照指定的here放入文档的mdx文件中。

恕我直言，故事书过多地使用了默认配置。对那些写作故事强加邮戳是没有意义的，这应该是一个选择。我是postcss的新手，我浪费了很多时间试图摆脱PoC的束缚。这是一个很大的关门。

任何帮助将不胜感激。

编辑：我应该已经指定了如何导入css文件。在这里：

import  "./Button.css";

在故事书中导入CSS会导致Postcss错误

0 个答案: