0

我正在尝试将 Foundation 与 Ember-CLI 应用程序一起使用，并且我想用 broccoli-scss 编译所有 SCSS。对于我的生活，我无法让它工作。

我的凉亭组件中有 Foundation，所以这是我尝试过的，以 broccoli示例应用程序为模型：

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler')
var compileSass = require('broccoli-sass');

var app = new EmberApp();

var styles = 'styles'
styles = pickFiles(styles, {
  srcDir: './bower_components/foundation/scss',
  destDir: './app/styles'
});

var appsScss = compileSass([styles], './app/styles/app.scss', './app/styles/app.css');

module.exports = app.toTree();

和...

// app/styles/app.scss
@import "../../bower_components/foundation/scss/normalize";
@import "../../bower_components/foundation/scss/foundation.scss";

我是浏览器，我只得到大约 800 行已编译的 CSS，其中标准foundation.css的长度约为 4.4k 行。所以很明显有些不对劲。

谢谢

4

1 回答 1

0

所以这里有一个例子：

var tree = pickFiles("app/styles", {
  srcDir: '/',
  destDir: 'mui'
});
var muiTree = pickFiles("material-ui/src/less", {
  srcDir: '/',
  destDir: 'material-ui'
});
return compileLess(mergeTrees([tree, muiTree]), 'mui/app.less', 'assets/app.css')

所以你可以看到第一个选择文件为所有应用程序样式创建了一个树。第二个选择文件为库样式创建一个树（在您的情况下，这应该是基础）。您应该有一个与样式库匹配的目标目录（在本例中为 material-ui）。这将用于您的 less/sass 文件中的导入：

@import "material-ui/scaffolding.less";
@import "material-ui/components.less";

您会看到我没有通过全局路径引用 material-ui 文件，而是基于我之前使用的 destDir 名称。

对 compileLess 的调用（与您的示例中的 compileSass 相同）将 less/sass 依赖项的完整树作为第一个参数，第二个参数是您的样式的主文件，第三个是输出文件。

当 less/sass 想要检查依赖项（通过导入）时，它将在您作为第一个参数传递的树中查找。

希望这可以帮助。

于 2014-12-09T15:14:00.670 回答