我该如何解决这个关于 Storybook 和 Sass 的问题？

Posted 2023-02-19

【中文标题】我该如何解决这个关于 Storybook 和 Sass 的问题？

【英文标题】：How can I resolve this issue about Storybook and Sass?

【发布时间】：2021-10-09 23:36:55

【问题描述】：

我有一个关于 Storybook 的问题。我无法启动故事书，而且我的 SCSS 文件有错误。

这是错误：

ModuleParseError：模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders .h1 |红色; | 在 handleParseError (/myproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:469:19)

我的意思是这只是一个简单的类。但是当文件为空时，编译是可以的，所以我不明白我该如何解决这个问题。

我的 SCSS 文件

.h1 
  color: red;

我的 Webpack 文件

const webpack = require('webpack');
const path = require('path');

module.exports = 
  mode: 'development',
  entry: path.resolve(__dirname, './src/index.js'),
  module: 
    rules: [
      
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      ,
      
        test: /\.scss?$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      ,
      
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: 
          name: '[path][name].[ext]',
        ,
      ,
    ],
  ,
  resolve: 
    extensions: ['*', '.js', '.jsx'],
  ,
  output: 
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  ,
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: 
    contentBase: path.resolve(__dirname, './dist'),
    hot: true,
  ,
;

我在 .storybook 文件夹中的 main.js 文件

module.exports = 
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]

请问有人有解决办法吗？ 提前致谢

【参考方案1】：

我终于解决了我的问题，所以我是这样做的。

首先，我卸载了 storybook (How to remove storybook from the react project)，然后通过 webpack (https://storybook.js.org/blog/storybook-for-webpack-5/) 重新安装。 一次使用 Webpack 它可以工作，而使用 NPM（或我的 Yarn）安装它使我遇到了我上面发布的复杂情况。我的猜测是它适用于 Webpack 5，而使用 NPM，我收到一个关于 css-loader 加载器的错误，它告诉我有关 Webpack 4 的信息。

Storybook 有效，但我仍然担心.scss 文件。我的终端告诉我，我没有特定的装载机。所以我通过在我们安装 Storybook 时创建的 .storybook 文件夹中添加一个 webpack.config.js 来为这种类型的文件添加一个加载器。我使用了此处的说明：https://storybook.js.org/docs/react/configure/webpack

关于 Sass 文件：Storybook 区分大小写，也不考虑以 _ 开头的文件，因此无法使用部分文件

我希望你没有这种问题，但如果你有，也许这些答案会对你有所帮助^^