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

无法使css模块在Typescript Storybook项目中工作

在Typescript Storybook项目中,要使CSS模块工作,可以按照以下步骤进行操作:

  1. 确保项目中已经安装了相关的依赖包。可以使用npm或者yarn进行安装。例如,使用npm安装可以执行以下命令:
代码语言:txt
复制
npm install --save-dev style-loader css-loader
  1. 在webpack配置文件中添加相应的loader规则。在项目根目录下找到webpack.config.js或者webpack.config.ts文件,添加以下代码:
代码语言:txt
复制
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

或者在webpack.config.ts文件中添加以下代码:

代码语言:txt
复制
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
  1. 在组件中引入CSS模块。在需要使用CSS模块的组件文件中,使用import语句引入CSS文件,并且将CSS类名绑定到组件的相应元素上。例如:
代码语言:txt
复制
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <p className={styles.text}>Hello, CSS Modules!</p>
    </div>
  );
};

在上述代码中,styles是通过import语句引入的CSS模块对象,containertext是CSS模块中定义的类名。

  1. 运行Storybook并查看效果。在终端中执行以下命令启动Storybook:
代码语言:txt
复制
npm run storybook

或者

代码语言:txt
复制
yarn storybook

然后在浏览器中打开Storybook页面,查看组件是否正常显示,并且CSS样式是否生效。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云开发(CloudBase)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置,支持多种操作系统和应用场景。了解更多信息,请访问腾讯云云服务器(CVM)
  • 腾讯云云开发(CloudBase):提供全托管的云端一体化开发平台,支持前后端一体化开发、云函数、静态网站托管等功能。了解更多信息,请访问腾讯云云开发(CloudBase)

希望以上信息对您有所帮助!

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

相关·内容

React 中使用 Storybook,构建强大的自定义 UI 组件

防止重复工作:有时,开发人员创建一个组件,却发现代码库中已经有类似的东西了。有了Storybook,每个组件都被记录下来,其他人也可以访问,从而避免了重复工作。...事实上,Storybook会检测到你正在使用Create React App,并为你安装依赖。这是有帮助的,特别是如果你是一个初学者。 本教程中,我们使用的是Next.js。...现在我们有了无样式的组件,让我们用一些CSS给它增添一些风味。 一个CSS对象可以用来动态地不同的变量上应用不同的样式。例如,Emotion是一个支持用JavaScript编写CSS对象的库。...我们的Next.js的index.js的头部上方的jsx将呈现一个页面看起来像这样: 上面的例子展示了当故事位于同一个项目中时,如何从Storybook导入组件。...这将使您能够跨项目导入它们,但为了简单起见,我们单个项目中构建了所有内容。 现在我们已经有了一个可以运行的样式组件,让我们直接进入Storybook的特性,它允许你构建漂亮的ui。

9.2K10

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

Hi 大家好我是 ssh,公司项目中,我们编写组件文档支持都是用的 Storybook,总体来说体验很好,当然我也遇到了一些问题,比如说依赖容易安装失败或编译失败,需要深度配置 webpack 等等...从那时起,我们开创了组件驱动开发、文档和测试的 UI 工作环境的概念。 在此期间,前端生态系统发生了巨大变化。IE11 终于退出了舞台。TypeScript 正在迅速占领 JavaScript 领域。...你再也不用为安装 Storybook 依赖而困扰了。...改进的类型安全性 我们 CSF3 中改进了对 TypeScript 的支持。更严格的类型提供了更好的编辑器检查和自动补全,为 TypeScript 用户带来了巨大的提升。有关详细信息,请查看。...但是,如果你使用的插件尚未更新,它可能无法工作,或者 Storybook 可能无法启动。

49030
  • 搬砖 React 4 年,我总结了这些企业级应用的要点

    使用 Next.js 及其强大的技术栈(包括 Tailwind CSSTypeScript、TurboRepo、ESLint、React Query 等)长达四年后,我已经积累了许多宝贵的见解和最佳实践...在此节中,我会分享企业环境中使用 Next.js 所积累的原则。 模块化和组件化 原则:分而治之 庞大的企业级应用领域,代码可以迅速变成一头难以驯服的野兽。...这种隔离不仅使代码更易于理解,还有利于测试和调试。 可扩展性设计 原则:规划未来增长 企业应用不是静态的,它们在演进。设计前端架构时就考虑到可扩展性。...我在这篇博客中展示了如何使用 TypeScript模块扩展自定义 NextAuth.js 中的默认 User 模型。 Turbo Repo 这也是我最喜爱的工具。...Turbo Repo 实现了有效的代码共享,允许团队共享库和组件上进行协作。 Storybook Storybook 允许开发者隔离 UI 组件并在可控环境中展示它们。

    49540

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

    文件夹和文件结构 文件命名 根据模块的功能或类的使用方式或使用它们的应用程序部分,有意义地命名文件。...Typescript Typing DefaultProps 迁移指南 Grid-Emotion Storybook Styleguide 引用其文档,“Storybook 是用于 UI 组件的 UI...useEffect hook 更复杂,您需要小心地跟踪您的依赖并确保通过清理回调取消订阅。...不要为 hooks 重写 虽然 hooks 可以新代码中符合人体工程学,但我们应该避免重写现有代码以利用 hooks。重写需要时间,使我们面临风险,并且为最终用户提供的价值很小。...当您添加/删除您需要的查询时,您不必使 render 调用解构保持最新。您只需要输入 screen 并让您的编辑器的自动完成功能处理其余的工作

    6.9K30

    聊一聊 2024 年 React 生态系统

    它不仅与各种框架兼容,而且能与 React 协同工作将内容发送到浏览器时,Astro 仅包含 HTML 和 CSS,即使使用了如 React 这样的框架来创建组件。...> {title} 首先,建议了解一下 CSS 模块。...动画 Web 应用中,所有动画都始于 CSS。但随着需求的发展,CSS 动画可能无法满足需求。这时,开发人员通常会寻求动画库的帮助,它使你能够使用 React 组件进行动画操作。...建议: 如果需要 JavaScript 的类型,就使用 TypeScript。 代码结构 如果希望 React 项目中采用统一且符合常识的代码风格,强烈推荐使用 ESLint。...Prettier是一个无配置的代码格式化工具,可以轻松集成到编辑器中。每次保存文件时,它会自动格式化代码,使代码更易于阅读和维护。 ESLint 和 Prettier 可以很好地协同工作

    98410

    前端开发的新纪元:全方位工具栈探索 | 开源专题 No.57

    其主要功能包括: 默认情况下具有高度安全性,除非显式启用,否则无法访问文件、网络或环境。 提供 Web 平台功能和 API (如 ES 模块、Web Workers 和 fetch())。...开箱即用支持 TypeScript。 仅提供单个可执行文件,并内置工具集 (例如 deno test、deno fmt 等)。 包含一组经过审核的标准模块,保证与 Deno 兼容。 支持 npm。...storybookjs/storybook[3] Stars: 79.9k License: MIT picture Storybook 是一个用于构建 UI 组件和页面的前端工作坊,可以独立地进行开发...Storybook 还具有可配置性强以及扩展性好的 API,甚至支持 React Native、Android、iOS 和 Flutter 等移动平台的开发。...它可以在任何符合 POSIX 标准的 shell(sh、dash、ksh、zsh 和 bash)上工作 Unix、macOS 等平台上都能运行。 优点: 快速方便地切换 Node 版本。

    13910

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

    它能避免你浪费大量时间重复劳作,从而提高日常的工作效率。 ES Lint:添加了对命令行工具的支持。它集成到你的IDE中,并帮助你改进语法,设置自己的编码样式,甚至某些情况下能为你自动修复错误。...npm IntelliSense:使用此模块,你可以轻松列出所有已安装的模块,快速搜索它们,并插入正确的代码片段以将其导入代码中。...为了将Storybook安装到你现有的React项目中,你所要做的就是: $ npx -p @storybook/cli sb init 该命令将检查你项目的结构,并尝试了解你正在使用的视图层(因为Storybook...事实上,这个工具使用方式非常简单,简单到你使用一条命令就能创建一个全新的React项目,而不必去思考什么项目结构才是最好的或是哪些模块要添加到项目才是正确的。这个工具将为您完成所有的工作。...├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js 有了如上的结构,你就可以如果如下命令启动服务器开始开发工作

    7.9K20

    Angular vs React 最全面深入对比

    OK,开始… … 成熟度 作为一名成熟的开发人员或者是能够决定架构及技术走向的人员,一必备的技能就是能够工作和项目中平衡成熟技术与最前沿框架之间的关系,既能保持人员及技术的前进,又能保证项目或产品的交付质量...与类似目的的TypeScript不同,它不需要开发人员迁移到新语言,并为你的代码注释类型检查工作流程中,类型注释是可选的,可用于向分析器提供其他提示。...TypeScript可以说是Angular中非常重要的特点,首先他给原本C#/Java开发人员提供了很容易进入前端的机会,另外TypeScript也想比JavaScript更容易理解,尤其是代码量或者业务复杂的项目中...它试图使创建通用应用程序的复杂任务尽可能简单,所以设置被设计为尽可能简单,最少量的新原语和对项目结构的要求。 MobX MobX 是用于管理应用程序状态的替代库。...Storybook Storybook是React的组件开发环境。它允许您快速设置单独的应用程序来显示您的组件。除此之外,它提供了许多附加组件来记录,开发,测试和设计您的组件。

    3.8K70

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

    高效有序地构建炫酷用户界面 以上是官网开宗明义的介绍,总之在 React 等领域,Storybook 已经很好的证明了自己,引入这个工具以后,即便是普通的项目中,也能帮助开发者逐渐打理出各种低耦合的可复用组件...css-loader sass-loader node-sass --save-dev 执行初始化: npx -p @storybook/cli sb init --type vue 此时会自动增加两个...同样以上文件中,做一些和项目中 main.js 相似的初始化工作: // .storybook/webpack.config.js import 'normalize.css'; import Vue.../src'), use: ['style-loader', 'css-loader', 'sass-loader'], }); return config; }; .storybook.../preview-head.html 中引入必要的样式等,项目中的类似工作可能是 index.html 等处完成的: <link rel="stylesheet" href="//foo/bar/index.<em>css</em>

    1.9K10

    如何编写类型安全的CSS模块

    文章提出了一个问题,即假设在 CSS 模块中添加或删除了一个类名。 下面是正文~ 使用TypeScript的好处之一是它显著减少了特定错误的发生,例如拼写错误;它甚至使访问原型方法和执行重构更加容易。...将 CSS 模块添加到你的项目中 如果你想在下一个 TypeScript 应用程序中使用 CSS 模块,则有几个选项。...你可以使用TypeScript定义文件手动为每个CSS模块创建类型,但更新它们很繁琐。假设从CSS模块中添加或删除了一个类名。在这种情况下,必须手动更新类型,否则类型安全性将无法按预期工作。...CSS模块之前都能很好地工作。...总结 TypeScript生态系统中工作具有巨大的潜力,但是,当过度依赖手动流程时,很容易破坏类型系统的信任或产生不必要的摩擦。

    97930

    GitHub上的7个热门TypeScript项目,要不要学一下

    增加的功能包括: 类型批注和编译时类型检查 类型推断 类型擦除 接口 枚举 Mixin 泛型编程 名字空间 元组 Await 以下功能是从 ECMA 2015 反向移植而来: 类 模块 lambda 函数的箭头语法...1、Storybook 网址 :https://github.com/storybookjs/storybook Stars: 54.5k Storybook是用于UI组件的开发环境。...无论你将数据存储何处,Grafana都能帮助你查询和可视化数据。你可以创建各种适合你需求的仪表板,并在团队中共享它们。动态仪表板能够创建可重复使用的仪表板,并且按指标查看日志非常简单。...n8n拥有170多个不同的节点来自动化你的工作流程,因此可高度自定义。可以将其托管在你自己的服务器上,以确保数据安全。凭借其出色的用户界面,你可以立即构建工作流程。.../github.com/johannesjo/super-productivity Stars: 2.5k Johannes Millan撰写的《超级生产力》是一个很好的工具,可以将你的日常任务集中一个地方

    3.6K20

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

    最初的时候 考虑过使用vue-cli3.0 vue-loader15+webpack4的配置 后来考虑到稳定性 暂时放弃 使用babel7的插件和配置使用less作为项目中css的预处理语言增加rollup...升级注意事项从 babel7 开始,所有的官方插件和主要模块,都放在了 @babel 的命名空间下,从而可以避免 npm 仓库中 babel 相关名称被抢注的问题Babel7 是对整个项目都生效的配置...webpack的配置 所以只能使用storybook中提供的自定义babel和webpack配置 基础设置都配置好了,引入插件的时候 发现插件不能用.............模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。...采用 es6 原生的模块机制进行模块的打包构建, 编译之后包 体积会更小。

    2.7K30

    Angular学习(01)-架构概览

    意思就是说,不同模块在运行期间互不影响,就好像各自运行在各自的沙箱容器中一样。举个简单的例子,不同模块中声明相同的变量名,或相同的 css 的类选择器,它们之间并不会起冲突。...:声明属于本模块内的服务 imports:声明本模块所引用的其他模块,通常是 imports 其他模块 exports 中声明的 exports:声明本模块对外公开的组件、指令、管道等,在这里公开的才可以被其他模块所使用...而对于浏览器解析并呈现前端页面时,Html、CSS、JavaScript 这三分文件通常都是需要的,而 Angular 是使用了 TypeScript,所以一个组件,其实就包括了:Html,CSSTypeScript...所以这里将组件和模板放在一起讲,因为就像开头那张图一样,组件是一份 TypeScript 文件,该文件中,定义了这个组件的模板(template)来源和 CSS 样式来源。...而 Angular 引入了 TypeScript,Scss 等浏览器并不无法识别的语言,自然,要让浏览器运行 Angular 项目之前,需要进行一次编译,一次转换。

    3.6K50

    VSCode拓展推荐(前端开发)

    (支持多数语言) Code Spellchecker 单词拼写检查 CodeBing 快速打开Bing并搜索,可配置搜索引擎 Color Highlight 颜色值代码中高亮显示 Color Info...调试Chrome Document This 注释文档生成 DotENV .env文件高亮 EditorConfig for VS Code EditorConfig插件 Emoji 代码中输入emoji...npm 运行npm命令 npm Intellisense 导入模块时,提示已安装模块名称 Output Colorizer 彩色输出信息 Partial Diff 对比两段代码或文件 Path Autocomplete...官方插件 Prettify JSON 格式化JSON Project Manager 快速切换项目 Quokka.js 不需要手动运行,行内显示变量结果 React Native Storybooks storybook...Imports typescript的import排序 String Manipulation 字符串转换处理(驼峰、大写开头、下划线等等) stylelint css/sass/less代码风格 SVG

    2.2K41

    【组件库封装】:封装一个 Library 什么流程?

    而开源许可协议使这些事情变得简单,开发者很容易向一个项目贡献自己的代码,它还可以保护你原始作者的身份,使你至少获得认可,开源许可协议还可以阻止其它人将某个产品据为己有。 ? ? 6....开发语言 不需要多说,TypeScript 可以极大地增加前端代码的可维护性。必然是要选 TypeScript 作为基础开发语言。...快速的冷启动 即时的模块热更新 真正的按需编译 默认支持 TypeScript,开箱即用 默认支持 jsx、tsx,开箱即用 支持 HMR Vitejs 初始配置? ? ? 11....B 项目中,执行 npm link npm link 第二步: A 项目中,执行 npm link B npm link B 12....文档 靠谱的开源软件必然需要靠谱的文档,vuepress、dumi、storybook 都是优秀的基于 Markdown 的快速建站工具。这些工具不仅能编写文档,还可以在线展示可运行的代码示例。 ?

    1.1K30

    2019年,React 开发者应该掌握的 22 种神奇工具

    但是,并不是每个人都在使用相同的工具或都知道所有有用的工具,这些工具有助于使 React 开发体验更有趣,更主动。...该应用程序允许我们声明属性及其类型,树状图中查看组件,导入背景图像,将其定义为有状态或无状态,定义其父组件,放大/缩小,以及将原型导出到一个新的或现有的项目中。...我们要做的就是末尾加上 typescript: npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦。...Storybook 如果你还不了解 Storybook(https://storybook.js.org/),并且希望能够轻松地构建 UI 组件,我强烈建议你立即使用它。...它会扫描项目中的组件,并且可以实现以下功能: 用属性、上下文和状态的任意组合下渲染组件 模拟每个外部依赖(例如 API 响应、localStorage 等) 与正在运行的实例进行交互时,查看应用程序状态的实时变化

    2.4K21

    轻量级工具Vite到底牛在哪, 一文全知道

    此外,Vite还能提供热模块替换,这意味着我们开发过程中,可以浏览器中看到代码刷新,甚至可以使用它来编译项目的精简版本,并直接用于生产。...通常,我们会事先考虑一下堆栈安装所需的依赖,这需要花费大量的时间进行配置,使某些工具可以更好配合我们的工作。所以使用Vite时也优先考虑堆栈。...实际使用中Vite令人惊叹,我们可以一两分钟内就建立一个非常高级的堆栈,并且能够轻松完成从JavaScript到TypeScript的转换以及从CSS到Sass的转换。...我们目中得到了简单的Vue设置,并插入Vue的内容。安装vue-router并配置Vue之后即可工作。调整Vite的汇总配置之后,我们可以使用Vite创建多个页面,如文档中的多页应用。...在这里,测试者尝试导入了一个100kB的JavaScript库,并添加了2万行CSS,将文件类型更改为TypeScript和Sass,强制Vite分别使用TypeScript和Sass编译器进行编译。

    4.1K40

    21个让React 开发更高效更有趣的工具

    /src/components,如下所示: 随着React hook的发布,这个应用程序需要更新做更多的工作。当然,开源是这个应用程序的好处,因为它使它有可能成为未来流行的开源存储库列表。 3....,还可以帮助你理解React是如何工作的。...即可: npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中的麻烦。...Storybook Storybook 是一个轻松地构建UI组件的库。该工具启动一个实时开发服务器,支持开箱即用的热重载,你可以在其中独立地实时开发React组件。 这足以作为普通文档页面: 11....它扫描项目中的组件,并使你能够: 通过 props,context和state任意组合来渲染组件。 模拟每个外部依赖(API响应、localStorage等)。

    2.4K30

    WebStorm for Mac(JavaScript开发工具)中文版

    Angular项目中的导航更容易Angular应用程序中,您现在可以使用相关符号...弹出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)不同的组件文件(如TypeScript...CSS的浏览器兼容性检查要检查目标浏览器版本是否支持您使用的所有CSS属性,可以首选项中启用新的 浏览器兼容性检查。...对CSS模块的Camel案例支持如果在项目中使用CSS模块,JavaScript文件中的类的代码完成现在将建议带有破折号的类名的驼峰版本。...改进了对短绒的支持WebStorm现在可以 一个项目中为ESLint和TSLint运行多个进程,以确保它们单个项目和具有多个linter配置的项目中正常工作 。...依赖的版本范围工具提示的package.json,按命令/ Ctrl键和版本悬停的依赖关系,看看运行的时候可以安装什么版本范围 npm install或yarn install。

    4.9K50
    领券