首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Storybook中为Angular启用样式源映射

在Storybook中为Angular启用样式源映射,可以按照以下步骤进行操作:

  1. 首先,确保你已经安装了Storybook和Angular,并且已经创建了一个Angular项目。
  2. 在Angular项目的根目录下,创建一个名为.storybook的文件夹,并在该文件夹下创建一个名为webpack.config.js的文件。
  3. webpack.config.js文件中,添加以下代码来启用样式源映射:
代码语言:txt
复制
const path = require('path');

module.exports = ({ config }) => {
  // Enable CSS source maps
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};
  1. 在Angular项目的根目录下,创建一个名为.angular-cli.json的文件(如果已存在,请忽略此步骤)。
  2. .angular-cli.json文件中,找到apps数组中的对象,并添加以下代码来启用样式源映射:
代码语言:txt
复制
"apps": [
  {
    "styles": [
      "styles.scss"
    ],
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles"
      ],
      "sourceMap": true
    }
  }
]
  1. 现在,你可以在Storybook中使用样式源映射了。在你的组件的.stories.ts文件中,导入你的样式文件,并在addDecorator函数中使用withStyles函数来启用样式源映射。示例如下:
代码语言:txt
复制
import { addDecorator } from '@storybook/angular';
import { withStyles } from '@storybook/addon-styles/angular';

import '../path/to/your/styles.scss';

addDecorator(withStyles);
  1. 运行Storybook,并查看你的组件,你应该能够在开发者工具的样式面板中看到样式源映射。

总结: 在Storybook中为Angular启用样式源映射的步骤包括创建webpack配置文件、配置Angular项目的样式源映射选项、导入样式文件并使用withStyles函数启用样式源映射。这样可以方便地调试和定位样式问题。腾讯云相关产品中,可以使用腾讯云云服务器(CVM)来搭建Storybook环境,详情请参考腾讯云云服务器产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Storybook 7 来了:迄今为止最大的更新

以组件中心的自动文档生成 在 Storybook 7 ,你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏,与组件的 stories 一起显示,而不是以前的选项卡式用户界面。...你可以通过添加autodocs标签来组件启用自动生成的文档页面。 带有 MDX 2 加持的手动文档编写 Storybook 7 通过支持 MDX2 提供了增强的手动文档编写功能。...更容易配置的样式插件 使用 Storybook 设置样式工具对许多开发人员来说是一个常见的挑战。...简单上手,请查看:样式插件:在 Storybook 配置样式和主题 数以百计的其他改进 除了上述所有内容,Storybook 7 还包含了无数其他的改进和错误修复。...Angular 改进:更好的安装。修复了许多错误。 Vue3 改进:源代码片段,插槽支持。 Default exports:SB main/preview 设置,带有TypeScript 类型。

51530

2018 年前端开发五大趋势

经过深思熟虑且久经时间考验的Angular是一回事,但是Vue ……我们没想到这个开发环境成为前端技术工具列表的佼佼者。 对于那些不熟悉Vue的读者,让我们简要介绍一下它的制胜之道。 ?...它的目的是超越传统的REST APIs的功能,同时简化多个传输的数据集合。 ? 让我们举个具体的列子。想象一下,你需要在正在构建的社交网络框架显示帖子列表,以及用户的喜好(点赞、收藏等)。...我们坚持认为,任何在职的前端工程师在 2018 年至少都能掌握这个流行工具的基本知识。 Storybook Storybook 是开发者在与 React 打交道过程中一个有用的开源工具。...特别是,得亏 StoryBook,你可以在独立的环境设计和策划应用程序外的 UI 组件,并且在创建新的 UI 组件时它会发生变化。...Storybook何在这里提供帮助? 如前所述,React Storybook允许您在应用程序之外开发和测试UI组件,并允许团队的其他开发人员继续使用它们。

2.9K40
  • 手摸手教你用 Storybook 改善组件库的开发

    更快更强的构建 UI 组件 Storybook 是一个开发独立的 React、Vue 和 Angular UI 组件的开源工具。.../stories/ 修改 .storybook/config.js 的相应配置,直接把 .stories.js 文件和对应的组件源码放在一起: const req = require.context(...同样在以上文件,做一些和项目中 main.js 相似的初始化工作: // .storybook/webpack.config.js import 'normalize.css'; import Vue...为了正确解析 Vue 单文件组件样式部分,修改设置: // .storybook/webpack.config.js const path = require('path'); module.exports.../preview-head.html 引入必要的样式等,项目中的类似工作可能是在 index.html 等处完成的: <link rel="stylesheet" href="//foo/bar/index.css

    1.9K10

    React 应用架构实战 0x2:构建和文档化组件

    在 React ,所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分,从而更容易开发应用程序。它还启用了组件的可重用性,因为我们可以在多个地方重复使用相同的组件。...# Chakra UI 当我们应用程序构建 UI 时,必须决定使用什么来组件设置样式。此外,我们还必须考虑是从零实现所有组件还是使用带有预制组件的组件库。...当然,这些库可能会带来成本,难以自定义或对最终包大小产生显著影响,但它们可以为我们节省大量开发时间。...chakra-ui/react @emotion/react @emotion/styled framer-motion 为了使用 Chakra UI,首先我们需要配置它的主题 provider 来启用其组件的样式...,这些样式将通过 GlobalStyles 组件注入,我们已经在 AppProvider 添加了该组件。

    83010

    从零开始,手摸手搭建前端组件库

    Storybook的运行不依赖于项目,开发人员不用担心由于开发环境、依赖问题导致不能开发控件。Storybook支持很多主流的框架(React、Vue、Angular)。...环境stories目录下 新建 xx.js文件,此处映射预览环境的 左侧预览目录 // xx.js文件 引入vue组件,编写测试案例。...@storybook/addon-storysource展示组件源码@storybook/addon-knobs动态展示propsstorybook-readme将markdown导入story@storybook...readme文档改造组件的使用文档类似于目前知名组件库 antd,element-ui,vant等支持代码库高亮显示,组件动态展示等效果,简而言之一句话: 能够在md运行代码。...,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。

    2.8K30

    前端基建处理之组件库优化方案

    webpack5和安装依赖 自动运行storybook 打开浏览器,我们可以看到storybook的界面 来走读一下创建出来的storybook demo文件,我们以Button.stories.js这个文件例...component: 这是你想要展示的组件,Storybook 将使用它来自动生成文档页(如果你启用了这个功能)。...在这个例子,所有的 args 和 argTypes 都被传递给 MyButton 组件,你可以在 Storybook 的 UI 调整它们的值。..."element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI); 解决样式问题 引入组件会有一些样式,所以我们也需要处理下引入的css,类似webpack...storybook,可以在本地预览,如果我们要单独把storybook单独部署一个到一个站点,其他开发可以直接打开去看 增加构建命令 在package.json增加命令,构建出storybook的产物

    37610

    2020年值得你去试试的10个React开发工具

    因此,当你的新React项目选择合适的IDE,合适的可视化工具甚至是合适的样式时,你都会有很多选择,你该怎么选择合适的?这是一件令人犯愁的事儿。...在安装DevTools后,在你已经在React Dev Tools和React Sight的扩展设置启用了“允许访问文件URL”选项,你就可以在DevTools种找到一个新的名为“React Sight...它集成到你的IDE,并帮助你改进语法,设置自己的编码样式,甚至在某些情况下能为你自动修复错误。...支持React以外的其他视图层,例如Vue,Angular等)。...完成后,你能够将它们导出到实际的自动生成的代码,而后你就可以对其进行自定义。 ? 如果你即将开始一个新项目,这个工具将会为你项目初始阶段节省很多时间。 9.

    7.9K20

    如意设计助手:Figma Dev Mode下生成 React 组件代码

    Dev Mode 下, Figma 提供开发者导航设计文件和将设计转换为代码的所有信息,开发者与设计师共享同一个文件( 唯一事实),从而有效地避免上下游交接遗漏细节信息。...( Jira 、 Storybook 和 GitHub ),简化工作流程 给组件添加关联链接和开发资源(代码组件的 storybook 链接 ) 简而言之, Dev Mode 是专为开发人员打造的...,用于快速审查和导航设计,用户可以在任何 Figma 设计文件启用 Dev Mode 。...如意设计助手快速支持 Dev Mode 背景 在 Dev Mode 发布之前,设计师与开发工程师在流程上基本属于割裂状态,设计师交付设计稿之后,开发根据命名规则或样式映射编写样式变量。...如意设计助手以插件桥梁,连接设计师和开发工程师,通过第三方能力来打通 Design Tokens 和组件的代码级应用。但只有获得编辑权限的用户才能在打开文档时启用插件,无形中会增加组织规模。

    1.6K20

    前端常见面试题--初级版

    **CSS选择器优先级:**内联样式优先级最高,其次是ID选择器,然后是类选择器、属性选择器和伪类,最后是标签选择器和通配符。如果有多个样式具有相同的优先级,则最后出现的样式将生效。...**盒模型:**CSS的盒模型描述了元素如何在页面上呈现,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。...2.如何在 React 实现组件之间的通信?3.Angular 的依赖注入是如何工作的?4.你如何使用 jQuery 选择和操作 DOM?...**Angular依赖注入:**Angular的依赖注入系统负责创建和管理应用的对象及其依赖关系。你可以通过服务(Service)和依赖注入器(Injector)来实现依赖注入。...### 回答示例:**管理复杂性和变化:**在前端开发,我经常遇到复杂性和变化。为了应对这些挑战,我采用分而治之的策略,将大问题分解小问题,并逐一解决。

    8510

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(新手入门篇)

    这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...NG-ZORRO特性: 提炼自企业级后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular 组件库,与 Angular 保持同步升级。...启用图标动态加载):y set up custom theme file(设置自定义主题文件):y choose your locale code(选择区域设置代码):ZH-CN choose template...引入样式: 在 angular.json 引入: { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ]...} 在 style.css 引入css样式文件: @import "~ng-zorro-antd/ng-zorro-antd.min.css"; 在 style.less 引入 less 样式文件:

    3.5K11

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    最好的样式是您不编写的样式 - 尽可能使用现有组件。 新代码应该使用 css-in-js 库 e m o t i o n - 它允许您将样式绑定到元素而无需全局选择器的间接性。...要在本地运行 Storybook,请在 getsentry/sentry 存储库的根目录运行 npm run storybook。 它部署在某个地方吗?...在需要少量状态或访问 react 原语(引用和上下文)的展示组件,它们通常是一个不错的选择。例如,具有滑出(slide-out)或可展开状态(expandable state)的组件。...当您需要创建新的共享状态时,请考虑使用 context 和 useContext 而不是 Reflux。此外,可以利用虫洞状态管理模式来公开共享状态和突变函数。...此方法可用于查找非交互式元素( div、span 和 paragraph)。

    6.9K30

    AngularDart4.0 指南- 模板语法一 顶

    快速执行 Angular在每个更改检测周期后执行模板表达式。 更改检测周期由许多异步活动触发,承诺的分辨率,http结果,计时器事件,按键和鼠标移动。...虽然您可以将值推送到HTML,并从HTML中提取值,但是如果将这些杂事转换为绑定框架,则应用程序更易于编写,读取和维护。 您只需声明绑定和目标HTML元素之间的绑定,然后让框架完成工作。...{{expression}} [target]="expression" bind-target="expression" 插值 组件属性 元素属性 元素类 元素样式 单向 从目标视图到数据 (target...设置按钮的disabled属性(Properties)(例如,使用Angular绑定)禁用或启用按钮。属性(Properties)的值很重要。...属性(Attribute),类和样式绑定 模板语法不太适合属性(property )绑定的场景提供了专门的单向绑定。 属性(Attribute)绑定 您可以直接使用属性绑定来设置属性的值。

    5.2K10

    当前端基建任务落到你身上,该如何推动协作?

    解决方案之一,就是国外很火的一个开源库:StoryBook: ? Storybook是一个开源工具,用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建 UI 组件。...一般的建议步骤是: 将业务从公共组件抽离出来。 在项目中安装StoryBook(多项目时另起) 按官方文档标准,创建stories,并设定参数(同时也建议先写Jest测试脚本),写上必要的注释。...不同组件配置StoryBook控件,最后部署。...Mock方式、路由管理以及样式写法也应当统一。 3. 在团队外促进协作 核心原则就是:“能用文档解决的就尽量别 BB。”...必要的接口文档站点与 API 测试(Swagger,Apidoc),不接受文件传输形式的接口。 早期的联调都是通过呐喊告知对方接口的标准。

    1.2K10

    Angular开发实践(二):HRM运行机制

    引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供的一个功能,angular-cli使用了它,它会在应用程序运行过程替换、添加或删除模块,而无需重新加载整个页面。...主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态 只更新变更内容,以节省宝贵的开发时间 调整样式更加快速 - 几乎相当于在浏览器调试器更改样式 这一切是如何运行的...我们先看看具体的效果: 1、启动angular-start项目,在控制台你可以看到HRM已经启用的消息: ? image 2、然后通过浏览器控制台可以看到,第一次加载请求了所有的资源: ?...举个例子,通过style-loaderstyle样式追加补丁。为了运行追加补丁,style-loader实现了HMR接口;当它通过HMR接收到更新,它会使用新的样式替换旧的样式

    1.7K70
    领券