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

【问题标题】：How can I have sass variables accessed within a Webpack import?如何在 Webpack 导入中访问 sass 变量？
【发布时间】：2016-02-27 19:41:32
【问题描述】：

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

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

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

我知道我可以通过简单地不要求组件的 .jsx 文件中的样式来解决此问题，而只需将它们全部单独导入到 main.scss 中，因此它们共享相同的上下文，但保留所有内容会很好封装。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：