Webpack Sass and foundation Как я могу манипулировать переменными

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 ,

Моя проблема заключается в том, что я хочу получить доступ к переменным и mixins в основе из app.scss, но поскольку они компилируются один за другим и добавляются, не представляется возможным получить доступ к этим миксинам и переменным. У любого есть решение?

Answer 1

Вам необходимо загрузить файлы зависимых .scss в пределах app.scss.

Чтобы сделать это с помощью веб-пакета. Я настроил мой 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.