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

使用 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:

module.exports = {
  core: {
    builder: 'webpack5',
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/components/**/*.stories.tsx"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: '@storybook/preset-scss',
      options: {
        sassLoaderOptions: {
           modules: true
        }
      }
    }
  ],
  "framework": "@storybook/react"
}

谁能告诉我哪里出错了?谢谢。

stack overflow SCSS Modules not properly loading in Storybook for my Nextjs app
原文答案

答案:

作者头像

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 。应该是你所需要的。

作者头像

确保你已经安装了 sass

npm install sass --save

安装 scss 预设

npm install @storybook/preset-scss --save

将其添加到 .storybook/main.js 内的插件列表中

addons: ['@storybook/preset-scss',]