html - Webpack:使用组件特定的 css 在 html 中呈现不同?

标签 html css node.js webpack webpack-style-loader

按照本教程,

https://github.com/christianalfoni/react-webpack-cookbook/wiki/Loading-CSS#component-specific

我尝试实现这个逻辑,这就是它的实现方式。

Setup

webpack-config

这是它在网络上的呈现方式, HTML Render

正如您所看到的问题,CSS 不适用于导航栏类,因为类名呈现为 ".app-components-navbar-navbar-navbar-wrapper". 但类名应该成为“navbar-wrapper”

  1. 如何解决这个问题?
  2. 它应该是这样工作的吗?
  3. 如何实现特定于组件的 CSS?

最佳答案

css 的加载程序中,尝试将 localIdentName 的值从 [path][name]-[local ][local]。 ident 名称基本上意味着它将按以下格式创建 css 类名。 ".app-components-navbar-navbar-navbar-wrapper" 表示 app/component/navbar 是地方它在哪里定义,导航栏是文件名。 Local 表示您在 css 中的类名。

希望对你有帮助

关于html - Webpack:使用组件特定的 css 在 html 中呈现不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34827147/

相关文章:

jquery - 不需要的幻灯片切换效果

javascript - 使用 jquery ui Draggable 排序后是否有任何选项可以获取旧父级

html - block 格式化上下文的含义

node.js - 如何将mongoose js模型转换为对象

javascript - 将 stdout 彩色输出传递给 grunt 输出

html - Angularjs 值不更新

jquery - Angularjs Image Slider按键绑定(bind)不起作用并且

html - 如何让Firefox中大图的缩放过渡更平滑? (就像在 Chrome 中一样)

html - CSS 元素不显示在图像上

node.js - nodeJS + Swig 模板将变量传递给 javascript