• home > webfront > ECMAS > storybook >

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

    Author:zhoulujun Date:

    storybook添加全局样式比较简单,但是添加全局变量非常麻烦。比如是直接修改webpackFinal: async (config, { configType }) 里面的config

    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种,第一种:https://blog.csdn.net/weixin_38303684/article/details/113921118

    const path = require('path')
    module.exports = {
      "stories": [
        "../src/**/*.stories.mdx",
        "../src/**/*[email protected](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/**/*[email protected](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全局变量设置》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8894.html