使用CSS模块和React的“ composes”关键字存在特异性问题

Question

当尝试使用CSS模块的“ composes”关键字时，我遇到CSS特殊性/导入顺序问题。

文件结构：

|_ MyComponent.jsx
|_ MyComponent.scss
|_ utilities.scss

MyComponent.jsx

import React from 'react';
import styles from './MyComponent.scss';

const MyComponent = ({ error }) => {
  const classes = classnames(
    styles.root,
    {
      [styles.error]: error
    }
  );
};

export default MyComponent;

MyComponent.scss

.root {
  color: #333;
}

.error {
  composes: red from './utilities.scss';
}

utilities.scss

.red {
   color: red;
}

如下面的屏幕截图所示，由于导入订单问题，.red类未应用。有没有办法解决这种问题而不求助于!important之类的东西？

注意：我正在将CSS模块和webpack + scss加载器一起使用。