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

【问题标题】：SCSS Modules not properly loading in Storybook for my Nextjs appSCSS 模块未在我的 Nextjs 应用程序的 Storybook 中正确加载
【发布时间】：2022-01-13 03:42:04
【问题描述】：

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

组件：

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"
}

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

【问题讨论】：

有趣的是，我在 24 小时内遇到了同样的问题。也许是某种版本冲突？

标签： sass next.js storybook css-modules

【解决方案1】：

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

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

【讨论】：