模块解析失败：带有 Storybook 6.1.11、Webpack 5.11.0、React 17.0.1 的意外字符“@”（1:0）

Posted 2023-02-19

【中文标题】模块解析失败：带有 Storybook 6.1.11、Webpack 5.11.0、React 17.0.1 的意外字符“@”（1:0）

【英文标题】：Module parse failed: Unexpected character '@' (1:0) with Storybook 6.1.11, Webpack 5.11.0, React 17.0.1

【发布时间】：2021-04-04 10:48:32

【问题描述】：

尝试使用所有最新版本设置 react-app。

Github Repo Link

尝试使用导入的 sass 文件运行 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（包含部分代码）

        test: /\.(css|sass|scss)$/,
        exclude: /node_modules/,
        use: [
          isDev ? "style-loader" : MiniCssExtractPlugin.loader,
          
            loader: "css-loader",
            options: 
              modules: 
                auto: (resourcePath) =>
                  resourcePath.indexOf("assets/stylesheets") === -1,
                localIdentName:"[name]__[local]___[hash:base64:5]",
              ,
              sourceMap: true,
            ,
          ,
          "sass-loader",
        ],
      

storybook/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,
      
    ;
  ,
;

【参考方案1】：

我不知道您对配置做了什么，但您会在 .storybook/main.js 中定义配置内容。而对于全局样式的 css 应该包含在 preview.js 文件中。

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

删除你的.storybook/config.js并添加.storybook/main.js，内容如下：

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

module.exports = 
  stories: [
    '../src/**/stories.js', // The name should have a prefix for component name like `button.stories.js` instead of `stories.js` like you've done. As you renamed, you can remove this pattern
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  webpackFinal: (config) => 
    return 
      ...config,
      module: 
        rules: custom.module.rules,
      ,
      resolve: 
        ...config.resolve,
        ...custom.resolve,
      
    ;
  ,
;

创建.storybook/preview.js 以导入您的全局样式：

import "../src/assets/stylesheets/app.scss";

【讨论】：

谢谢它的工作。我使用此链接storybook.js.org/docs/react/get-started/install 中提到的这个命令npx sb init 添加了故事书，所以上面的文件是由它生成的.. 更改这些文件的原因是什么

这是官方文档告诉自定义webpackstorybook.js.org/docs/react/configure/…。你的错误是你的配置没有影响:) 然后我让它再次影响

【参考方案2】：

有些人在使用带有 Webpack 5 的 Storybook 6.2.0 时使用了 running into problems 一些 scss 预设。我建议不要使用预设，而是如上所述在 main.js 中配置 Webpack 配置。这是 Sass 的 Storybook 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'),
                ,
              ,
            ],
          ,
        ],
      ,

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

【讨论】：

如果您将故事书添加到 nrwl 工作区，那么这将起作用。如果您已将 react 库设置为使用 nrwl cli 中的 scss 样式选项，则所有这些加载程序都已安装