问题标签 [css-modules]

所以我有一个搜索框组件，将在网站所有页面的导航栏中使用。我也想在网站的其他页面中使用这个组件/html，因此我把它放在下面显示的组件中

位置搜索框.js

我正在使用带有 web pack 的 css 模块将我的 scss 转换为 css，然后生成随机样式以在组件的类名中使用。

位置搜索框.scss

这在组件内部使用只是在输入和提交按钮之间增加了一些空间。

这又是在 react-bootstrap 的帮助下的 NavBar 组件。

MainNavBar.js

现在我创建了一个主页组件，我想在其中使用 LocationSearchBox 组件。

主页.js

Home.js 中的搜索组件，按钮具有与导航栏相同的 margin-left 属性，因此它向右移动了一点。我不希望这种情况发生。我希望它只应用于导航栏内使用的搜索框，但我不确定如何在不为导航栏创建单独的搜索框的情况下使用 CSS 模块和 React 组件来做到这一点，但我认为这毫无意义有完全相同的代码。

我觉得我根本没有正确使用 CSS 模块，我没有正确使用它的理念和 CSS 模块的要点。

我正在尝试在 webpack 级别解决 css-modules全局与本地 css 问题。

我现在最好的解决方案是标记文件并在它们上运行不同的加载器，这在现实世界的项目中使用起来很乏味。

假设我有文件 styles.css

在应用程序代码的某个地方我想写这个：

这很冗长，但是

1. 显式的，并且可以在以后配置（localByDefault/globalByDefault）
2. 从 git 的角度来看，比一直重命名文件要好
3. 同一个文件可以有不同的处理方式

所以我的问题是：

是否可以根据不同的查询参数有条件地应用不同的加载器？

我正在使用 react、react-router、express 和 webpack 构建一个同构应用程序。现在我想使用 css 模块来导入 css。

我使用import './index.css'in index.jsx，它在客户端上运行良好，但不适用于服务器渲染。错误是Error: Cannot find module './index.css'。

组件/index.jsx

服务器/路由器/index.js

webpack.config.dev.js（用于 webpack-dev-server）

我似乎无法在任何地方找到这个答案！基本上我正在使用 CSS 模块，并且正在导入文件。下面是 CSS 文件的示例：

然后这是我到目前为止在我的 JS 文件中的内容：

我不知道如何添加两个类className，以下不起作用：

请帮忙，我如何实现将两个类放在一个元素上？

我正在使用 react-router 和 CSS-modules 和 webpack。这一切都很好，但现在需要能够更改语言。我首先尝试通过仅将状态属性更改为不同的语言来做到这一点，但是当更改它时，当前路由不会重新呈现，因此语言更改只会在下一次路由更改发生时生效，即单击链接。

计划 B：尝试将语言环境添加到路由 / 以便它现在出现在 URL 中，这应该会生效，因为路由更新 -> 重新渲染。但是，我现在在加载我的 CSS 模块时遇到错误。

这是我的路由器设置：

这是我的应用程序中的功能：

我的默认路线是液压，所以我得到了错误：

未捕获的错误：“is-english/hydraulics”CSS 模块未定义。

我想知道它是否是我的 webpack css 模块加载器中的配置：

在hydraulics.jsx中，我像这样导入CSS：

我不明白的是为什么css模块是从“is-english”加载的，“is-”前缀来自哪里？此外，该文件不在英文子文件夹中，它与液压系统.jsx 在同一个文件夹中

或者是否与路线的安排方式有关？

我有 react-css-modules 使用 webpack 在我的应用程序上工作，它使用我提供的 ExtractTextPlugin 生成编译的 .css 文件。一切正常，但我坚持如何让它与业力/茉莉花一起工作？

当在 webpack 上构建时未发生此错误时，我不断收到 CSS Module is undefined 。

这是我的业力配置，唯一的区别是我不使用 ExtractTextPlugin

即因为test: /(((activityFeed|fonts)\.css)|(grids-core\.css)|(grids-responsive\.css))$/我有loader: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]']

我想使用 postcss-loader 和 css 模块将一组样式传递给 React 组件。我用于编译 css 文件的 webpack.config.file 如下所示：

我的 React 组件文件如下所示：

每当我只将一种样式传递给 className 时，它​​会正确加载它，但是当我传递一个数组时，它不会解析其中的任何一个。相反，它将它与编译类名上的逗号连接起来。

如何将多个样式传递给一个元素？

我正在开发的 ReactJS 应用程序中使用 css-modules。

如果我需要为所有菜单 div（home、about）创建一个类，还需要为每个链接设置特定的类，那么我需要为所有链接创建一个共享类。我认为有不同的方法可以做到这一点：

我在这里使用来自同一文件中的一个类的组合。在这种情况下，我只需要在我的 JSX 中使用一个类名。

其他2种方式：

或者可能：

在第二个和第三个代码中，我需要在每个 className 属性中有 2 个类：

我见过人们以不同的方式做到这一点。哪一个更容易，性能更好，在更大的应用程序中可以更好地扩展？

我正在为我的 reactjs 项目使用 css 模块。这是我尝试使用全局 css 类的文件：

这是我的styles.css

但它不起作用。我认为我在导入时犯了错误。如何导入全局 css，然后在我的应用程序中使用它？

好吧，我是新手，很抱歉犯了愚蠢的错误。

我正在尝试使 CSS 模块与 React 组件一起使用。我的代码如下：

CSS只是

和 webpack 配置：

当我想运行我的代码时会出现问题。无论我是包含scss还是css归档，我总是得到

我能做些什么？