问题标签 [babel-plugin-react-css-modules]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 如何在 create-react-app 中设置 babel-plugin-react-css-modules?
我真的很喜欢 babel-plugin-react-css-modules 分别为全局和本地样式提供的 className 和 styleName 的分离,但是在让插件与 create-react-app 一起工作时遇到了一些麻烦。
我尝试通过运行安装插件
npm install babel-plugin-react-css-modules --save
...正如它在项目中所说的那样(github https://github.com/gajus/babel-plugin-react-css-modules#css-modules)...
...并且还按照类似线程 (#5113) 中的建议使用 craco 来帮助克服 create-react-app 的限制而无需弹出,但我仍然无法导入 scss 文件并使用 styleName 对其进行引用.
有谁知道我是否在这里遗漏了其他东西?抱歉,如果这是一个菜鸟问题,我是 React 新手,并且一直在寻找解决方案。
react-css-modules - 错误:无法使用 babel-plugin-react-css-modules 和 postcss-import 解析 styleName 'x'
问题
最近我在一个 React 项目中从不推荐使用的 CSS Module 切换react-css-module
到babel-plugin-react-css-modules
使用 CSS Module 并遇到无法解析使用@import statements
(with postcss-import
) 导入的 CSS 文件中的样式声明的问题。我想知道这是一个已知问题还是这些插件的配置中缺少什么?
该场景是使用通过多个 CSS 文件以传递方式 -ed声明tabs.jsx
的类:utilities.css
@import
这将导致使用 webpack 在捆绑阶段出错:
调试
添加一些调试语句,getClassName.js
显示来自的类声明@import
永远不可用,因此抛出上面的错误。
设置
以下是依赖项:
中的设置postss.config.js
:
中的设置webpack.config.js
:
在.babelrc
:
以前我用的react-css-module
时候,从来都不是问题。所以也许它特定于较新的babel-plugin-react-css-modules
或与的兼容性postcss-import
?任何有关如何解决此问题或帮助的方向都将不胜感激。谢谢。
javascript - 从反应项目中的引导程序等框架中删除未使用的 CSS 类
我们目前正在使用 webpack 和 babel 开发一个 react 项目,并希望在我们使用的 CSS 框架 Bootstrap 和 AdminLTE 2 中自动删除未使用的 CSS 类。
在项目中,我们使用webpack (v4.41.0)、babel (v7.6.2)和react (16.10.1)。要使用 CSS 类,我们使用 babel 插件babel-plugin-react-css-modules,它使用 css 模块。
什么是现代和当代的方式来做到这一点?
css - 使用 CSS 模块扩展框架的 CSS 类
我目前正在开发一个反应项目,在某些情况下必须扩展 CSS 类的框架,如带有属性的引导程序。例如,我想更改此类的背景颜色(https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99)。
如何使用babel-plugin-react-css-modules做到这一点?我只能使用我自己的 CSS 类或 AdminLTE 之一:
在项目中,我们使用 webpack (v4.41.0)、babel (v7.6.2) 和 react (16.10.1)。要使用 CSS 类,我们使用 babel 插件 babel-plugin-react-css-modules,它使用 css 模块。
什么是现代和当代的方式来做到这一点?
webpack - 无法解析 styleName
我在我的反应应用程序中使用 scss 模块,但每次我更改 a时,我都会在热重载期间styleName
收到错误消息。Could not resolve styleName
如果我没有任何相应的样式styleName
,我也会收到错误消息。每次重新编译都必须重新启动服务器。我的配置有什么问题吗?
webpack.dev.js
例子.scss
vue.js - vue js css 模块在每次渲染中为元素赋予相同的名称
我正在开发一个 vue 项目,并且我制作了 CSS,modules
以便我可以为不同的元素分配不同的类名。
但是包含 CSS 模块的组件会多次渲染,例如:
按钮组组件像这样呈现按钮
它分配类名,如
但我希望在同一组件的每次渲染中使用不同的类名
reactjs - Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app
材料-ui:v4.8.2
反应:v16.12.0
带有 rtl 应用程序的 babel-plugin-react-css-modules - 我想使用 injectFirst 但后来我收到警告:
Material-UI: you cannot use the jss and injectFirst props at the same time.
我的猜测是我应该以不同的方式定义 jss,以便它支持 rtl 和 css 模块。
对于 rtl 我应该这样做:
对于 css-modules 样式,我应该这样做:
谁能告诉我应该如何将两者结合起来?
javascript - 对象类型中缺少 ClassName 道具。流和 CSS 模块
我已经使用 CLI quickstart初始化了一个 React Native 应用程序。我唯一编辑的是我使用 CSS Modules 来设置组件的样式(注意:className 而不是 style)。我想用 flow 对项目进行类型检查,如果我运行 flow,它会给出以下错误。
我无法创建视图元素,因为className
对象类型 [1] 中缺少属性但存在于道具 [2] 中。
我能做些什么?
css - 如何在反应中使用css模块模式覆盖外部模块类
我想在css
本地覆盖组件的外部模块类
In my code
现在ExternalComponent
渲染一个div
带有 class 的元素parent
。因此,如果我正在导入
ExternalComponent
如何覆盖本地导入模块中的parent
类,以便仅针对此组件更改样式,而我使用它的其他位置不会更改。ExternalComponent
style
ExternalComponent
顺便说一句,我正在使用反应。