storybook添加全局样式与sass全局变量设置

storybook组件需要全局样式，只需在.storybook/preview.js 增加全局样式即可。

import '../src/style/index.scss';
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    expanded: true,
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

但是，sass全局变量添加有麻烦。

网上查找了，大致有2种，第一种：Storybook + react + ts 配置全局样式_storybook样式_放荡的小跳蛙的博客-CSDN博客

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, '../'),
      options:{
          additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`
      }
    });

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

第二种，在.storybook文件夹中创建一个webpack.config.js文件解决了我的问题：

module.exports = (storybookBaseConfig, configType, defaultConfig) => {

  defaultConfig.module.rules.push(
    {
      resourceQuery: /module/,
      use: [
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false
          }
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: false,
            importLoaders: 2,
            modules: true,
            localIdentName: '[name]_[local]_[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: false
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: false,
            indentedSyntax: true,
            data: '@import "@/sass/_variables.scss";'
          }
        }
      ]
    }
  );

  return defaultConfig;};

但是都没有效果，

这两种方法，都需要全局安装一些loader，但是的cli 项目是不需要全局变量

所以，我就直接改了成可用的。

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    '@storybook/preset-scss',
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  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.
    config.resolve = {
      ...config?.resolve,
      alias:{
        ...config?.resolve?.alias,
        '@': resolve('src'),
      }

    }
    // Make whatever fine-grained changes you need
    config.module.rules[6].use[2].options = {
      additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`
    }

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

这个改动对storybook 6.5.14 是生效。

转载本站文章《storybook添加全局样式与sass全局变量设置》,
请注明出处：storybook添加全局样式与sass全局变量设置 - Storybook Driven Development学习笔记—组件化之后之组件管理 - 周陆军的个人网站