我正在尝试找到解决此问题的方法：
我正在使用基于页面的不同css包含的模板，例如：
Login uses login.css
Home uses home.css
如果我加载两个css，登录页面就会被破坏，因为home.css会覆盖样式 所以我需要加载或要求login.css如果路由或组件是Login，而另一个是Home。
如果我加载这两个webpack构建一个包含两个文件的全局css，那么一切都会被破坏......
我试图在componentDidMount中要求css，但我认为这不是方法：）
提前致谢
答案 0 :(得分：0)
听起来这两种风格都非常特定于页面，所以为什么不简单命名它们呢？
在模板中，有一个.login / .home类，并将其用作css中的命名空间。如果你正在使用sass，这就像在课堂上包装所有sass一样简单。否则，您可以通过并将类添加到所有元素/ clases的开头。
答案 1 :(得分：0)
这是一种更通用的组合CSS文件的方法，不依赖于SASS或reactjs等技术。
我假设，如果您将两个CSS文件组合在一起，则使用Grunt或类似工具来自动执行该任务。因此，自动更新CSS文件应该没问题，即使它们来自外部源，并且您希望使用更新版本而不进行手动更改。
我还假设您正在使用类来设置页面样式，因此CSS中没有基于标记的样式。因为您无法在不对其进行制动或对代码进行更大更改的情况下重命名CSS文件中的标记。
如果我的假设是真的，你可以使用像grunt-css-prefix这样的东西。它可以为登录页面的CSS类添加前缀，就像在此片段中一样。
原始CSS文件内容：
.foo,
.bar,
h1 {
display: none;
}
运行Grunt脚本后的CSS文件内容：
.login-foo,
.login-bar,
h1 {
display: none;
}
只需在您的Login-HTML中使用login-foo类名称，就可以了。
有关如何使用grunt-css-prefix的更多详细信息，请查看https://www.npmjs.com/package/grunt-css-prefix。
答案 2 :(得分：0)
首先，如果您为视图使用不同的css类，并且只根据这些类设置元素样式，那么您不应该遇到任何问题。
在反应中加载css的最佳方法是通过组件进行操作，如果你的样式文件夹中有一个组件 login.jsx （或者你要用来保存的任何文件夹）你的样式）创建一个sass部分 _login.scss 并为该给定组件添加css选择器和样式，并为您的react应用程序中的每个组件执行此操作。
然后，您只需将这些部分包含到main.scss文件中，然后将该文件加载到您的反应应用中。
这是一个带有一些sass partials的main.scss文件的例子。
@import 'base/variables';
@import 'base/defaults';
@import 'components/login';
@import 'components/home';
这是一种良好而干净的方式来处理反应中的样式，当然，您需要配置您的webpack才能让sass在您的应用程序中工作。