0
点赞
收藏
分享

微信扫一扫

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

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全局变量设置​​》,
请注明出处:​​https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8894.html​​

举报

相关推荐

0 条评论