Webpack Sass和基礎如何操作變量

Question

我正在使用webpack加載所有資產。

我打開我的資產一樣，在app.js和Concat的他們ExtractTextPlugin：

import 'foundation-sites/scss/normalize.scss'; import 'foundation-sites/scss/foundation.scss'; import './../sass/app.scss';

我聽說的WebPack將由一個編譯閱讀每一行和一個CSS和它們添加到我的DIST文件。

我的問題是，我想從app.scss訪問基礎變量和mixins，但由於它們是一個接一個地編譯和追加的，所以似乎無法訪問這些mixin和變量。任何人都有解決方案？

Answer 1

您需要在app.scss內加載您的依賴項.scss文件。

用webpack做到這一點。我已經配置了我的app.scss像這樣：

@import '~foundation-sites/scss/foundation'; 
@import 'settings'; 
@include foundation-everything($flex: true); 
// the rest of my imports now have access to Foundation mixins 
@import 'mycomponent.scss' 

的~告訴sass-loader告訴webpack到look in the modules directory for those files。