Storybook 5 Sass-loader生成空模块类名
Storybook是一个开源工具，用于开发、测试和部署UI组件。它提供了一个交互式的开发环境，可以独立于应用程序运行，并且可以在不同的状态下展示组件。
Sass-loader是一个Webpack加载器，用于将Sass文件编译为CSS文件。它允许开发人员在项目中使用Sass语法，并将其转换为浏览器可识别的CSS。
生成空模块类名是指在使用Sass-loader编译Sass文件时，生成的CSS类名为空。这通常是为了避免在组件库中引入不必要的样式，或者在某些情况下，需要在组件中动态添加样式。
Storybook 5是Storybook的一个版本，它提供了许多新功能和改进。它支持Sass-loader，并且可以与Sass文件一起使用。通过使用Sass-loader，开发人员可以在Storybook中展示和测试使用Sass编写的组件，并确保它们在不同状态下的正确显示。
在使用Storybook 5和Sass-loader时，生成空模块类名可以通过以下步骤实现：
- 确保已安装并配置好Webpack和Sass-loader。
- 在项目中创建一个Sass文件，例如styles.scss。
- 在styles.scss文件中定义所需的样式。
- 在Storybook的配置文件中，例如.storybook/main.js，添加对Sass文件的引入和加载。
- 运行Storybook，并在Storybook中展示和测试组件。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
腾讯云云服务器（CVM）是一种可扩展的计算服务，提供了高性能、可靠的云服务器实例，适用于各种应用场景。您可以使用CVM来部署和运行Storybook和其他应用程序。
腾讯云对象存储（COS）是一种安全、低成本、高可靠的云存储服务，适用于存储和管理各种类型的数据。您可以使用COS来存储和管理Storybook中使用的静态资源文件，如图片、样式文件等。
更多关于腾讯云云服务器（CVM）的信息，请访问：腾讯云云服务器（CVM）产品介绍
更多关于腾讯云对象存储（COS）的信息，请访问：腾讯云对象存储（COS）产品介绍
相关·内容
我最近升级了tom Next.js 11，所以我也使用了storybook webpack5测试版。但是当我将sass-loader添加到配置中时： // .storybook/main.js
builder: "webpack5", stories: ['..test: /\.
浏览 12提问于2021-06-30得票数 1
回答已采纳
1回答
我正在使用下一个css模块(sass)。我尝试了我遇到的每一个解决方案，但我仍然无法让它发挥作用。 ], '@storybook/addon-links',
'@storybook/add
浏览 13提问于2022-02-20得票数 4
回答已采纳
/storybook/main.js的当前配置，我似乎不能让任何css模块在我的storybook组件中工作。这是一个Typescript项目，所以不完全确定我是否需要任何额外的东西来使模块正常工作。/stories/**/**/*.stories.tsx"], "@builder.io/storybook",
"@storybo
浏览 21提问于2020-09-16得票数 2
1回答
在类型记录环境中使用scss模块时，我的模块存储在一个名为default的属性中。因此，我无法正确地生成带有类型化-scss-模块的类型。@(js|jsx|ts|tsx)'], webpackFinalmodules=true', 'sass-load
浏览 1提问于2021-10-08得票数 1
2回答
在我的盖茨比( Gatsby )项目中，我很难让故事书很好地使用css模块。我可以渲染按钮组件，但它没有添加任何我的样式。@(js|jsx|ts|tsx)"], core: {builder: "webpack5",}"devDependen
浏览 7提问于2021-06-25得票数 2
回答已采纳
1回答
我使用生成一个样式指南，我想为'src‘文件夹添加一些别名，这样我就可以轻松地引用组件和scss文件。所以我在.storybook下添加了.storybook文件 test: /\.scss$/,
loaders: ["style-loader
浏览 0提问于2018-04-10得票数 1
回答已采纳
/"filename.module.css"
然后，例如，如果我的filename.module.css中有一个名为.button的CSS选择器，则关联类名可以在styles对象中作为styles.button但是，相同的styles.button不访问童话中的正确类名，它返回undefined。在检查了styles对象之后，我发现类名包含在styles中的一个default对象中。我假设我必须配置Storybook，以便以与Gatsby相
浏览 18提问于2022-04-12得票数 1
回答已采纳
: "^6.1.21", "@storybook/preset-scss": "^1.0.3", "mini-css-extract-plugin": "^2.4.4",
"prettier":
浏览 5提问于2021-11-15得票数 2
1回答
如何用故事簿化名？
、、、
], "builder": "webpack5"}const = (args) => <Header {...args} />；(/path/project/node_modules/@storybook/builder-
浏览 6提问于2021-08-13得票数 1
回答已采纳
致
即使我们使用相同的localIdentName，生成的结果也不同于css中的选择器和DOM元素上的className。(注意:在babel-plugin css-模块中，localIdentName是[path]___[name]__[
浏览 6提问于2017-12-06得票数 5
回答已采纳
1回答
以下是错误：您可能需要一个适当的加载程序来处理此文件类型，目前还没有配置加载程序来处理此文件。但是当文件为空时，编译就没问题了，所以我不明白如何解决这个问题。$/, use: ['style-loader', 'css-loader', 'sass-loader']/dist'),
浏览 4提问于2021-08-04得票数 2
它似乎工作，而不是它改变我的css类名。模块：loader: ExtractTextPlugin.extract({ useExtractTextPlugin({ allChunks: true,CSS输出为global.css格式：
._346v3lRS9p5</em
浏览 30提问于2017-06-29得票数 0
在使用import语句时，我在区分sass加载程序和css-加载程序方面有点困惑。据我所知，css加载程序解析导入状态(@ import )，样式加载器在页面上动态地注入样式。我也在我的应用程序中使用sass-加载程序。所以我对sass-加载程序的功能感到困惑。它是否也解析导入语句以及将sass转换为css。在这种情况下，如果我只在我的项目中使用sass文件，我就不需要css加载器，因为该工作将由sass加载程序完成。我就在这儿吗？有人能强调一下这件事吗。任何帮助都将不胜感激。
浏览 3提问于2017-05-11得票数 16
2回答
我正在使用babel插件-react css -模块，我想使用css模块的源代码地图。{ 'sass-loader?但问题是名称，我
浏览 3提问于2018-02-18得票数 2
1回答
sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',sourceMap',在我的css文件中，我添加了以下内容 color: red;所有工作都与样式有关，但是如果我检查元素，这是我所看到的它是生成的css<e
浏览 2提问于2018-05-07得票数 0
我终于得到了我满意的东西，使用HtmlWebpackPlugin来生成基于模板的index.html、sass-loader、typings-for-css-modules-loader (处理类型记录中的' }}hello.css color: #5df7ff;hello.tsx</h1>; // This does not work: tex
浏览 0提问于2018-08-16得票数 3
回答已采纳
modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader', } }所以当我从style.scss导入类时 color: red;如下所示：/style.scss'<div class=&quo
浏览 1提问于2017-09-27得票数 0
回答已采纳
BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
但这将覆盖我的许多应用程序字体，因为在元素级别上，没有应用到类中
浏览 3提问于2021-08-30得票数 2
2回答
/styles.scss中存在的类.button现在，因为我想实现CSS模块，所以我在webpack中修改了css-loaderI added the config for css modules localIdentName: '[hash:base32:5]/postcss.config.js&
浏览 25提问于2017-12-19得票数 9
1回答
在与卷取捆绑后没有使用顺风样式。
、、、、
当我用Storybook运行组件时，它们会按预期显示。但是，当我捆绑使用Rollup时，类名将被应用，但是CSS不包含在构建中。": "start-storybook -p 6006", }, "type但是，在运行npm run rollup时，生成dist&
浏览 4提问于2022-06-20得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
