Webpack Sass和基础如何操作变量

Question

我正在使用webpack开发一个项目来加载我的所有资产。

我在app.js加载我的资产，并将其与ExtractTextPlugin联系起来：

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

我在某处读到了webpack会读取每一行并逐个编译成CSS并将它们附加到我的dist文件中。

我的问题是我想从app.scss访问基础中的变量和mixin，但由于它们是一个接一个地编译并附加，因此似乎无法访问这些mixin和变量。有人有解决方案吗？

Answer 1

您需要在.scss内加载相关app.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。