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
storybook添加全局样式与sass全局变量设置的更多相关文章
- 如何设置 sass 全局变量,js如何使用 sass 变量
关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: re ...
- 02 uni-app框架学习:设置全局样式统一每个页面的背景颜色
1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page
- Joomla - 自定义(自定义模块、修改原有模块样式、添加全局JS)
一.自定义模块 自定义模块 参考 Joomla - 模块系统(新建模块.模块类别.自定义模块)第三点 自定义模块部分 自定义模块布局 参考 Joomla - T3模板(非常好用的4屏响应式模板) 的第 ...
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式
全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...
- WPF——如何为项目设置全局样式。
在项目中,需要为所有的Button.TextBox设置一个默认的全局样式,一个个的为多个控件设置相同的样式显然是不明智的.在WPF中可以通过资源设置全局样式,主要有俩种方法: 1.第一种就是先写好按钮 ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
- Vue中使用Sass全局变量
前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...
- vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则
第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...
随机推荐
- 谈谈流计算中的『Exactly Once』特性
本文翻译自 streaml.io 网站上的一篇博文:"Exactly once is NOT exactly the same" ,分析了流计算系统中常说的『Exactly Onc ...
- 企业微信获取code
String url="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+AuthUtil.APPID + ...
- go基础-接口
一.概述 接口是面向对象编程的重要概念,接口是对行为的抽象和概括,在主流面向对象语言Java.C++,接口和类之间有明确关系,称为"实现接口".这种关系一般会以"类派生图 ...
- Spring Boot 关闭 Actuator ,满足安全工具扫描
应用被安全工具,扫描出漏洞信息 [MSS]SpringBoot Actuator敏感接口未授权访问漏洞(Actuator)事件发现通告: 发现时间:2023-11-25 19:47:17 攻击时间:2 ...
- Eclipse 安装 ABAP 插件报错 Microsoft Visual C++ 2013 (x64) 快速解决
去官网下载Microsoft Visual C++ 2013 (x64) 安装 Download Visual C++ Redistributable Packages for Visual St ...
- Django学习(二) 之 模板的使用
写在前面 昨晚应该是睡的最好一天吧,最近一个月睡眠好差,睡不着不说,而且半夜总醒,搞的第二天就会超没精神. 昨天下午去姐姐家,小外甥直接进屋就问我说: 老舅,你都很长时间没来啦,**(前女友)怎么哪去 ...
- 吉特日化MES系统&各类化妆品检验标准汇总
在日化行业中,生产配料过程中,对产品的检验主要分为四大类: (1) 感官指标 (2) 理化指标 (3) 微生物指标 (4) 毒理指标 根据每个产品的不同,其指标会有所不同
- [ABC264Ex] Perfect Binary Tree
Problem Statement We have a rooted tree with $N$ vertices numbered $1,2,\dots,N$. The tree is rooted ...
- 理解 Paimon changelog producer
介绍 目的 Chaneglog producer 的主要目的是为了在 Paimon 表上产生流读的 changelog, 所以如果只是批读的表是可以不用设置 Chaneglog producer 的. ...
- Codeforces Round #426 (Div. 2) problem C
C. The Meaningless Game time limit per test 1 second memory limit per test 256 megabytes input stand ...