Question

在NextJS中为Storybook加载全局样式和图像的最佳方法是什么？

以下是故事书文件（config.js和scs-loader.scss和webpack.config.js）

webpack.config.js

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
            presets: [require.resolve('babel-preset-react-app')],
        },
    });

    config.resolve.extensions.push('.ts', '.tsx');

    config.module.rules.push({
        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
        loader: require.resolve('file-loader')
    });
    return config;
};

config.js

import '!file-loader!style-loader!css-loader!sass-loader!./scss-loader.scss';
import { configure } from '@storybook/react';
configure(require.context('../components', true, /\.stories\.(j|t)sx?$/), module);

scss.loader.scss

@import '../styles/global.scss';

使用上述配置，我可以成功构建一个Storybook，但是看不到任何全局样式，也看不到global.scss中引用的任何图像

如果我按如下所示删除config.js中的文件加载器

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';
import { configure } from '@storybook/react';
configure(require.context('../components', true, /\.stories\.(j|t)sx?$/), module);

我看到此错误。

Error: Can't resolve '/images/hero.jpg' in 'D:\dev\personal\nextjs-ts\.storybook'

如果然后我从global.scss中删除所有图像，则可以加载Storybook，并且可以看到全局样式，但是我丢失了所有图像。我需要尝试使图像和全局样式协同工作。谢谢。

这是在global.scss中如何引用图像的示例。

.hero {
    width: 100%;
    height: 800px;
    background: url('/images/hero.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

NextJS和Storybook不呈现图像和全局样式

0 个答案: