- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
问题
我正在尝试使用babel-plugin-react-css-modules在我的 React 项目中,与 React CSS 模块相比,可以获得更好的性能。
但是,样式未正确应用。
原因
<style>
中的版本标签用奇怪的连字符包裹,例如:
<style>
标签:-components-Foo-___Foo__foo___1fcIZ-
components-Foo-___Foo__foo___1fcIZ
Even if we are using the same
localIdentName
, the generated results are different from selectors in css and className on DOM element.(Note: In babel-plugin-react-css-modules, the
localIdentName
is[path]___[name]__[local]___[hash:base64:5]
as hard-coded inoptions.generateScopedName
)
知道为什么会有连字符包装器吗?
最佳答案
经过一番努力,我自己找到了解决方案。
这是由于 css-loader
的一个怪癖造成的:如果 localIdentName
选项周围有双引号,它将用连字符包裹生成的类名。
因此,不要在 webpack 配置中执行此操作:
{
test: /\.(scss|sass)$/,
use: [
'style-loader?sourceMap',
'css-loader?modules="true"&importLoaders="1"&localIdentName="[path]___[name]__[local]___[hash:base64:5]"',
'sass-loader?sourceMap',
],
},
这样做:
{
test: /\.(scss|sass)$/,
use: [
'style-loader?sourceMap',
'css-loader?modules="true"&importLoaders="1"&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'sass-loader?sourceMap',
],
},
或者如果您使用 Webpack 2+ 则更好
{
test: /\.(scss|sass$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
sourceMap: true,
localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
}
},
'sass-loader'
]
}
关于reactjs - babel-plugin-react-css-modules 与 styleName 不匹配样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47675952/
我在我的 react 应用程序中使用 scss 模块,但每次我更改 styleName ,我收到错误 Could not resolve styleName在热重载期间。如果我没有 styleName
我有一个包含一些列的 celltable,我想隐藏其中的 2 个,我试图隐藏一个 celltable 列,同时使用 css stylename 执行以下操作: firstColumn.setCellS
我有这段代码,但没有应用样式。我看过articles on the web这应该在哪里工作。有什么想法吗? var alert:Alert = Alert.show("You have not sav
我尝试在 typescript 中使用 react-css-modules,但我收到一条错误消息,无法将 styleName 添加到 div 元素。这是代码。 import * as Immutabl
我已经开始为我使用 Lucene 创建的索引构建一个小型搜索引擎。我使用 GWT 创建我喜欢的 GUI,但遇到了问题。我正在尝试在 DockLayoutPanel 中心的 FlowPanel 中添加一
我计划动态调用我在 React 组件上导入的 css 选择器。但如果样式不存在,则会抛出错误 Uncaught Error :无法解析样式名称“dynamicvalue3”。 是否有可能在 react
问题 我正在尝试使用babel-plugin-react-css-modules在我的 React 项目中,与 React CSS 模块相比,可以获得更好的性能。 但是,样式未正确应用。 原因 中的版
我确实有非常简单的 ui.xml 和 HTML5 输入元素。当我向这个元素添加 stylename 时,它不会影响任何东西吗?我该怎么做,或者我错过了什么? stylename="{style.i
我是一名优秀的程序员,十分优秀!