Reactjs 模块分析失败：意外字符'@'；（1:0）故事书6.1.11，网页5.11.0，React 17.0.1

正在尝试使用所有最新版本设置react应用程序

尝试在导入sass文件的情况下运行storybook将导致以下错误。尝试在不导入样式的情况下运行，storybook可以正常工作

当以

npm start run

运行时，相同的代码可以正常工作，没有警告和错误

我已经使用@dr.pogodin/babel plugin react css modules和sass、webpack 5、react 17以及最新的软件包配置了css模块

ERROR in ./src/assets/stylesheets/app.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "./base.scss";
| @import "./generics/font.scss";
| @import "./generics/spacing.scss";
 @ ./stories/index.js 5:0-44 8:2-10:4 8:58-10:3 9:4-49
 @ ./src/components/atoms/button/stories.js

babel.config.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "@dr.pogodin/babel-plugin-react-css-modules",
      {
        webpackHotModuleReloading: true,
        autoResolveMultipleImports: true,
        filetypes: {
          ".scss": {
            syntax: "postcss-scss",
          },
        },
        generateScopedName: "[name]__[local]___[hash:base64:5]",
      },
    ],
  ],
};

webpack.config.js用于css（包含部分代码）

故事书/webpack.config.js文件

const custom = require('../webpack.config.js');

module.exports = {
  // stories: ['../src/components/**/*.stories.js'],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

---

我不知道您对配置做了什么，但您可以在

.storybook/main.js

中定义配置内容。对于全局样式，css应该包含在

preview.js

文件中

简而言之，你必须做以下几件事：

• 删除

  .storybook/config.js

  并添加

  .storybook/main.js

  ，其中包含以下内容：

const custom=require（'../webpack.config.js'）；
module.exports={
故事：[
“../src/**/stories.js”“，//该名称应该为组件名添加前缀，如'button.stories.js'，而不是像您这样的'stories.js'。重命名后，可以删除此模式
“./src/***故事@（js|jsx|ts|tsx）”
],
webpackFinal：（配置）=>{
返回{
…配置，
模块：{
规则：custom.module.rules，
},
决心：{
…config.resolve，
…习惯，决心，
}
};
},
};

• 创建

  .storybook/preview.js

  以导入全局样式：

导入“./src/assets/stylesheets/app.scss”； 当将Storybook 6.2.0与Webpack 5一起使用时，有些人已经成为某个SCS预设。我建议不要使用预设，而是如上所述在main.js中配置Webpack配置。以下是Sass的工作故事书网页包配置的相关部分：

module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.(scss)$/,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: function () {
                      return [require('precss'), require('autoprefixer')];
                    },
                  },
                },
              },
              {
                loader: require.resolve('sass-loader'),
                options: {
                  implementation: require('sass'),
                },
              },
            ],
          },
        ],
      },

---

我已经写了更多关于使用Webpack 5启动Storybook（以及修改Storybook Webpack配置）的内容。

谢谢，它奏效了。。我使用这个链接中提到的命令npx sb init添加了故事书，所以上面的文件是由它生成的。。更改这些文件的原因是什么这里的官方文件告诉定制

webpack

。您的错误是您的配置没有影响：）然后我再次使其产生影响

module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.(scss)$/,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: function () {
                      return [require('precss'), require('autoprefixer')];
                    },
                  },
                },
              },
              {
                loader: require.resolve('sass-loader'),
                options: {
                  implementation: require('sass'),
                },
              },
            ],
          },
        ],
      },