Webpack Sass 和基础如何操作变量答案

【问题标题】：Webpack Sass and foundation how do I manipulate the variablesWebpack Sass 和基础如何操作变量
【发布时间】：2015-12-30 14:23:46
【问题描述】：

我正在使用 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 访问基础中的变量和 mixins，但是由于它们是一个接一个地编译并附加的，因此似乎无法访问这些 mixins 和变量。谁有解决办法？

【问题讨论】：

标签： css sass zurb-foundation mixins webpack

【解决方案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。

【讨论】：