将 CSS 应用于单个反应组件

Question

待办事项：

• 仅将完整的引导 CSS 应用到单个反应组件，而不影响其他组件。
• 但是，其他组件依赖于引导程序，并使用引导程序 类。
• 在不更改组件中使用的类/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