Broccoli.js 和 Ember-CLI :试图让 SCSS 编译器工作

Broccoli.js and Ember-CLI : trying to get SCSS compiler to work

本文关键字：SCSS 编译器 工作 js Ember-CLI Broccoli      更新时间：2023-09-26

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

我的 bower 组件中有粉底，所以这是我尝试过的，从西兰花示例应用程序中修改：

// 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 行长。所以显然有些不对劲。

谢谢

所以这里有一个例子：

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')

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

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

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

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

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

希望这有帮助。

相关文章：