覆盖模块中的全局 CSS 样式不起作用

Question

我在使用模块组合覆盖 CSS 样式时遇到问题。

我当前的设置：

我有一个第三方网格库文件，我将其插入到我的应用程序的入口 JS 文件中：
```
import './css/thirdparty/file.css';
```

我也在为我的组件使用 CSS 模块，如下所示：

import styles from './component.module.css';

const Component = () => {

// component code omitted

// in render
<div className={styles.col14}></div>

在 webpack 配置中，我设置了两个规则来加载 file.css 使用普通 css-loader 和 *.module.css 文件使用 css-loader 和模块。

所有这些文件都已正确加载并且样式都存在。问题是：

file.css 包含：

.col-1-4 /* and all other col-1-* variations*/ {
    float: left;
    min-height: 1px;
    padding-right: 20px;
}

.col-1-4 {
    width: 25%;
}

component.module.css 包含：

.col14 {
    composes: col-1-4 from global;
    padding-right: 0;
}

组件当前输出：

<div class="col14__3bA8W col-1-4">

所以样式应该被覆盖了，但我在浏览器中看到的是 padding-right 仍然是 20px。它似乎只在我尝试从全局样式进行组合时发生，因为如果我从同一个组件 CSS 文件中组合两个类，它会按预期工作。

有谁知道为什么这不起作用？

Answer 1

你可以试试

.col14 {
  composes: col-1-4 from global;
  padding-right: 0!important;
}

Overwriting global CSS style in modules is not working