如何在 create-react-app 中使用导入全局 sass 变量（已弹出）

Question

请参阅this repo 了解更多信息和复制。

我正在使用弹出的 create-react-app，我希望能够在单个样式表中使用全局 sass 变量，而无需导入样式表。我认为使用sass-resources-loader 是我应该使用的（尽管如果有更好的方法，请告诉我）。我已经更新了 create-react-app 弹出的 webpack 配置 here，但是每当我运行 yarn start 时，我仍然会收到投诉：

SassError：未定义的变量：“$boxSize”。 在 src/SampleComponent/sampleComponent.scss 的第 5 行 , 高度: $boxSize;

在尝试使用 sass-resources-loader 时我做错了什么还是应该使用不同的东西？谢谢，下面是一些文件 sn-ps 以获得更多上下文：

文件结构：

src/
  - SampleComponent/
    - SampleComponent.js
    - SampleComponent.scss
  - styles/
    - sizes.scss
  - index.js  

SampleComponent.js：

import * as styles from './sampleComponent.scss';

const SampleComponent = () => (
  <div className={styles.div}>
    <h3>hello world</h3>
  </div>
);

export default SampleComponent;

sampleComponent.scss：

.div {
  align-items: center;
  background: pink;
  display: flex;
  height: $boxSize;
  justify-content: center;
  margin: 5rem;
  width: $boxSize;
}

sizes.scss：

$boxSize: 30rem;

Answer 1

使用 sass-loader 库，我就是这样用的，效果很好。

{
  loader: 'sass-loader',
  options: {
    sourceMap: true,
    additionalData: `
        @import "sources/scss/modules/_config.scss";
        @import "sources/scss/modules/_global.scss";
      `
  },
},