模块解析失败:意外字符@ (1:0)与童话6.1.11，Webpack 5.11.0，反应17.0.1

Question

试图建立一个反应-应用程序与所有的最新版本。

Github回购链接

尝试使用导入的sass文件运行故事书将导致以下错误。尝试在不导入样式、故事书作品的情况下运行。

相同的代码在以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]",
      },
    ],
  ],
};

用于css的webpack.config.js (部分代码被嵌入)

{
        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,
      }
    };
  },
};

​

​

Answer 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";

Answer 2

有些人在使用Storybook 6.2.0与Webpack 5一起使用Storybook 6.2.0时，已经做了一些遇到问题预置。我建议您不要使用预置设置，而是像上面提到的那样在main.js中配置Webpack配置。下面是Sass工作故事集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(和修改故事集Webpack配置) 到这里来的故事书。

Answer 3

另一个原因可能会发生:如果您正在向应用程序中添加新组件，并且为您的sass加载程序定义的路径不再匹配。

如果你在你的.storybook/main.js里有这个

  webpackFinal: async config => {
    // Add SASS support
    // https://storybook.js.org/docs/configurations/custom-webpack-config/#examples
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              compileType: "icss",
            },
          },
        },
        "sass-loader",
      ],
      include: path.resolve(__dirname, "../"),
    }) 

更新或完全删除include路径。