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学习笔记—组件化之后之组件管理 - 周陆军的个人网站