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