SCSS 模块无法在我的 Nextjs 应用程序的 Storybook 中正确加载

Question

使用 Nextjs 和 Storybook 开发一个新项目。我们使用 SCSS 模块来设计组件的样式，它们在浏览器上的实际应用程序中工作得很好，但它们不会在故事本身中链接起来。这里有一些简单的片段来显示我现在所处的位置：

成分：

import React from 'react'
import styles from './VideoEntryTile.module.scss'

const VideoEntryTile: React.FC = () => {
    return (
        // This displays properly in the browser but not storybook
        <div className={styles.container}>
            <p>Hello</p>
        </div>
    )
}

export default VideoEntryTile

SCSS模块：

.container {
    background-color: blueviolet;
}

组件故事：

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import VideoEntryTile from './VideoEntryTile';

export default {
  title: 'Video Entry Tile',
  component: VideoEntryTile,
  argTypes: {
  },
} as ComponentMeta<typeof VideoEntryTile>;

const Template: ComponentStory<typeof VideoEntryTile> = (args) => <VideoEntryTile {...args} />;

export const Primary = Template.bind({});

Primary.args = {};

./storybook/main.js：

import React from 'react'
import styles from './VideoEntryTile.module.scss'

const VideoEntryTile: React.FC = () => {
    return (
        // This displays properly in the browser but not storybook
        <div className={styles.container}>
            <p>Hello</p>
        </div>
    )
}

export default VideoEntryTile

谁能告诉我哪里错了？谢谢。

Answer 1

scss-preset.js创建一个名为的文件.storybook：

// Copied from https://github.com/storybookjs/presets/blob/master/packages/preset-scss/index.js
function wrapLoader(loader, options) {
    if (options === false) {
       return [];
    }
 
    return [
       {
          loader,
          options,
       },
    ];
 }
 
 function webpack(webpackConfig = {}, options = {}) {
    const { module = {} } = webpackConfig;
    const {
       styleLoaderOptions,
       cssLoaderOptions,
       sassLoaderOptions,
       rule = {},
    } = options;
 
    return {
       ...webpackConfig,
       module: {
          ...module,
          rules: [
             ...(module.rules || []),
             {
                test: /(?<!module)\.s[ca]ss$/,
                ...rule,
                use: [
                   ...wrapLoader('style-loader', styleLoaderOptions),
                   ...wrapLoader('css-loader', {
                      ...cssLoaderOptions,
                      modules: false,
                   }),
                   ...wrapLoader('sass-loader', sassLoaderOptions),
                ],
             },
             {
                test: /\.module\.s[ca]ss$/,
                ...rule,
                use: [
                   ...wrapLoader('style-loader', styleLoaderOptions),
                   ...wrapLoader('css-loader', {
                      ...cssLoaderOptions,
                      modules: true,
                   }),
                   ...wrapLoader('sass-loader', sassLoaderOptions),
                ],
             },
          ],
       },
    };
 }
 
 module.exports = { webpack };
 

这将遍历每个 scss 文件，如果它是 module.scss 文件，则以与非文件不同的方式处理它。

在 main.js 中，添加presets: [path.resolve("./.storybook/scss-preset.js")],到module.exports. 应该是你所需要的。