如何在Webpack导入中访问sass变量？

Question

我很难弄清楚如何在React组件的sass文件导入中访问Sass变量。这是我当前的目录结构，我使用Webpack捆绑所有内容：

components/
  Sample/
    Sample.jsx
    Sample.scss
sass/
  main.scss
  variables.scss

在Sample.jsx内部，我正在导入Sample.sccs，但是，来自variables.scss的变量没有通过，因为我假设它们是独立的模块，它们不共享相同的上下文？

我知道我可以通过简单地不要求组件的.jsx文件中的样式来解决这个问题，而只是在main.scss内单独导入它们，因此它们共享相同的上下文，但它会是很高兴保持所有封装。

Answer 1

您需要在variables.scss文件中导入components/Sample/Sample.scss。

在components/Sample/Sample.scss文件的顶部添加以下内容：

@import "../../../sass/variables.scss";