Storybook + react + ts 配置全局样式

Storybook + react + ts 配置全局样式

react 中配置storybook 网上一大片, 这里主要提一下作者使用时遇到的一些小坑.

首先要注意你使用的storybook 版本， 因为不同版本之间， 出现的配置文件格式及命名有点差别.
本人使用的是

“devDependencies”: {
“@storybook/react”: “^6.1.18”,
“babel-core”: “^6.26.3”,
“babel-loader”: “^8.2.2”
}

storybook默认配置如下:
main.js

 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app"
   ]
 }

只需要添加相对应的loader即可

const path = require('path')
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
}

最后在preview.js中把全局scss样式引入即可

import '../src/styles/index.scss'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}