[英]Broccoli.js and Ember-CLI : trying to get SCSS compiler to work
I'm trying to use Foundation with an Ember-CLI app and I want to compile all the SCSS with broccoli-scss. 我正在尝试将Foundation与Ember-CLI应用程序一起使用,并且希望使用西兰花-scss编译所有SCSS。 For the life of me I cant get it to work.
为了我的一生,我无法使它运转。
I have Foundation in my bower components so heres what I've tried, modled off of the broccoli sample app : 我的凉亭组件中装有Foundation,因此这是我尝试过的,从西兰花样品应用程序中摘下来的内容:
// 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();
And... 和...
// app/styles/app.scss
@import "../../bower_components/foundation/scss/normalize";
@import "../../bower_components/foundation/scss/foundation.scss";
I'n the browser I'm only getting about 800 lines of compiled CSS, where the standard foundation.css
is about 4.4k lines long. 在浏览器中,我只能得到约800行的已编译CSS,其中标准的
foundation.css
长约4.4k行。 So something is obviously wrong. 因此,显然有问题。
Thanks 谢谢
So here is an example: 所以这是一个例子:
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')
so you can see the first pick file creates a tree for all the app styles. 因此您可以看到第一个选择文件为所有应用程序样式创建了一个树。 The second pick files create a tree for the library styles (in your case this should be foundation).
第二个选择文件为库样式创建树(在您的情况下,这应该是基础)。 You should have a desination directory that matches the style library (in this case material-ui).
您应该有一个与样式库(在本例中为material-ui)匹配的目标目录。 This will be used for the imports in your less/sass file:
这将用于您的less / sass文件中的导入:
@import "material-ui/scaffolding.less";
@import "material-ui/components.less";
You see that I do not reference the material-ui files thru global path, but based on the destDir name I previously used. 您会看到我没有通过全局路径引用material-ui文件,而是基于我以前使用的destDir名称。
The call to compileLess (which is the same as compileSass in your example), takes the full tree of less/sass dependencies as the first param, the second param is the main file for your styles and the third is the output file. 对compileLess的调用(与您的示例中的compileSass相同),将具有less / sass依赖关系的完整树作为第一个参数,第二个参数是样式的主文件,第三个参数是输出文件。
When less/sass want to check for dependencies (via import) it will look in the tree you passed as the first param. 当less / sass要检查依赖关系(通过导入)时,它将在您作为第一个参数传递的树中查找。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.