javascript - Storybook 没有拾取 scss 文件

Question

在这里是 Storybook 的新手，我通过运行来初始化一个 Storybook 项目npx sb init。试图在我的项目中使用 scss 文件。我weback.config.js通过运行配置并启动npm run storybook，但它显示了一个空的故事书（它应该显示按钮、标题和页面组件）。我收到以下终端错误：

WARNING in ./stories/Title.stories.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Project\framework\packages\stories\Title.stories.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:28):

这是我所做的：

• 添加了一个stories/title.scss文件
• webpack.config.js在根目录中添加了
• 修改后.storybook/main.js 的文件结构如下：

--project 
  --.storybook
    main.js
    preview.js
  --stories
    Title.js
    Title.stories.js
    title.scss
  webpack.config.js
  package.json

这里是main.js和webpack.config.js：

main.js：

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

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: (config) => {
    return { ...config, module: { ...config.module, rules: custom.module.rules } };
  }
}

webpack.config.js：

const path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                include: __dirname
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
                include: path.resolve(__dirname, '../')
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
                include: __dirname
            },
            {
                test: /\.(woff|woff2)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'fonts/[hash].[ext]',
                        limit: 5000,
                        mimetype: 'application/font-woff'
                    }
                }
            },
            {
                test: /\.(ttf|eot|svg|png)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'fonts/[hash].[ext]'
                    }
                }
            }
        ]
    }
}

在我添加webpack.config.js和修改main.js. 有人可以告诉我是什么导致了这个问题吗？谢谢！

标签： javascriptreactjswebpackstorybook