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 needconfig.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 configreturn 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 needconfig.module.rules[6].use[2].options = {additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`}// Return the altered configreturn config;},
}

这个改动对storybook 6.5.14 是生效。

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