如何在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

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

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

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