Question

Todo：

仅将完整的引导CSS应用于单个react组件，而不会影响其他组件。
但是，其他组件依赖于引导程序，并使用引导程序课程。
在不更改组件中使用的类/ id的情况下，是否可以同时使用这两个技巧？然后仅将CSS特定于该组件。这不是一个好的编程习惯，但是任何技巧都可以。
- 如果不可能，我可以做些什么最小的更改才能使其正常工作？代码很长，我无法检查每个分区的CSS并添加ID。假定它是唯一可能的解决方案。

场景：

我有2个具有巨大代码的组件，例如 Component A 和 B ，
组件A 使用<link rel="stylesheet" href="assets/scss/style.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css">
组件B 使用 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

这两个组件相互干扰，如果使用A，则B CSS会损坏，反之亦然。

Answer 1

您将引导程序用作全局CSS，所以事情会逐步发生。

但是，如果您使用webpack并希望同时享受全球css和组件css的世界，请配置webpack来测试* .module.css以应用css模块，并配置* .css视为全局css。不过，仍然需要进行一些替代。

对于这么大的代码库来说，这可能是不现实的。

关于如何使用webpack实施的粗略想法：

webpack.config.js

{
  test: /\.css$/,
  include: [/\.global/, /bootstrap/],
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: { modules: false }
      }
    ]
  })
},
{
  test: /\.css$/,
  exclude: [/\.global/, /bootstrap/, /node_modules/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[local]--[hash:base64:5]'
        }
      }
    ]
  })
}

有关更多信息，请在css-modules repo

进行大量讨论并开放PR

将CSS限制为单个react组件

1 个答案: