如何在 Next.js 中将 SCSS 和 Tailwind CSS 与 Storybook 结合使用

Question

我正在尝试将全局 scss 文件加载到 Storybook 中，但是一旦我将导入从.cssto更改为.scss，我就遇到了错误，从不@被识别到@import tailwind到ERROR in ./styles/globals.scss。这是我目前陷入的错误。

这是我的 main.js 文件.storybook

//.storybook/main.js
module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../components/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
    })

    return config
  },
  framework: '@storybook/react',
}

//.storybook/preview.js
import '../styles/globals.scss'

export const parameters = {
  actions: {argTypesRegex: '^on[A-Z].*'},
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

当我运行故事书时出现错误：

ERROR in ./styles/globals.scss
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

我能够使用普通global.css文件运行 Storybook find，但是当我添加 scss 时，出现错误。

这是我的依赖项列表（如果有帮助的话）：

"dependencies": {
    "next": "12.0.7",
    "path": "^0.12.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.45.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.4.9",
    "autoprefixer": "^10.4.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "cypress": "^9.1.1",
    "eslint": "7",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-storybook": "^0.5.3",
    "postcss": "^8.4.4",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.0"
  }

Answer 1

如果您使用 Webpack 4，降级某些依赖项可能会有所帮助。

对于 Webpack-4 尝试运行：

yarn add -D @storybook/preset-scss \
  sass \
  css-loader@5 \
  sass-loader@10 \
  style-loader@2

然后将以下内容添加到.storybook/main.js：

module.exports = {
  addons: ['@storybook/preset-scss'],
};

参考：

• https://github.com/storybookjs/storybook/issues/16115
• https://storybook.js.org/docs/react/addons/install-addons#using-preset-addons