webpack样式加载器-在react组件上导入不同的样式，而无需重写

webpack style-loader - import different styles on react components without overriding

本文关键字：样式 重写 加载 react webpack 组件 导入      更新时间：2023-09-26

我有两个React组件，它们内部需要样式：

产品列表：

import './list.css';
import React from 'react';
export default class List extends React.Component {
   ...
}

产品详细信息：

import './details.css';
import React from 'react';
export default class Details extends React.Component {
   ...
}

它们有不同的风格，可以相互覆盖，为了简单起见，我们假设它是body:上的background-color属性

list.css

body {
    background-color: #ddd;
}

详细信息.css

body {
    background-color: #f80;
}

实际发生的事情-当通过webpack的样式加载器捆绑时，两个元素的样式都保留在页面上

<style type="text/css">
body {
    background-color: #ddd;
}
body {
    background-color: #f80;
}
</style>

加载器的webpack配置：

...
{
   test: /'.css$/,
   loader: 'style?singleton!css!cssnext'
}

这意味着详细信息的样式在列表页上也是活动的。保持它们不同的最佳策略是什么？是否有替换样式的方法？

使用样式加载程序时。您可以使用他们提供的可用api。你可以在这里阅读。

所有冲突的css都可以放在.useable.css中，并使用可用的api为这些文件再创建一个加载器。

{
  module: {
    loaders: [
      { test: /'.css$/, exclude: /'.useable'.css$/, loader: "style!css" },
      { test: /'.useable'.css$/, loader: "style/useable!css" }
    ]
  }
}

希望能有所帮助。

使用同构样式加载器代替样式加载器。它将用组件名称命名类名，并保持样式的唯一性。因此，可以保持可组合性、独特性和批判性风格。更多信息：https://github.com/kriasoft/isomorphic-style-loader

相关文章：