在 broccoli-sample-app 中用 broccoli-compass 替换 broccoli-sass

问题描述

我正在尝试将 broccoli-sass 替换为 broccoli-compass，在 西兰花余烬样品.

I'm attempting to replace broccoli-sass with broccoli-compass, in the Broccoli Ember Sample.

我的应用结构如下:

app
public
styles
  app.scss

Brocfile:

...
var compileSass = require('broccoli-compass')
...
var appNamespace = 'my-app-name';

function preprocess (tree) {
  tree = filterTemplates(tree, {
    extensions: ['hbs', 'handlebars'],
    compileFunction: 'Ember.Handlebars.compile'
  })

  return tree
}

var app = 'app'
app = pickFiles(app, {
  srcDir: '/',
  destDir: appNamespace // move under app namespace
})
app = preprocess(app)

var styles = 'styles'
styles = pickFiles(styles, {
  srcDir: '/',
  destDir: appNamespace
})
styles = preprocess(styles)

var tests = 'tests'
tests = pickFiles(tests, {
  srcDir: '/',
  destDir: appNamespace + '/tests'
})
tests = preprocess(tests)

var vendor = 'vendor'

var sourceTrees = [app, styles, vendor]
if (env !== 'production') {
  sourceTrees.push(tests)
}
sourceTrees = sourceTrees.concat(findBowerTrees())

var appAndDependencies = new mergeTrees(sourceTrees, { overwrite: true })

var appJs = compileES6(appAndDependencies, {
  loaderFile: 'loader.js',
  ignoredModules: [
    'ember/resolver'
  ],
  inputFiles: [
    appNamespace + '/**/*.js'
  ],
  legacyFilesToAppend: [
    'jquery.js',
    'handlebars.js',
    'ember.js',
    'ember-resolver.js'
  ],
  wrapInEval: false,
  outputFile: '/assets/app.js'
})

var appCss = compileSass(appAndDependencies, 'styles/app.scss')

var publicFiles = 'public'

module.exports = mergeTrees([appJs, appCss, publicFiles])

但是，在调用 broccoli serve 时出现以下错误:

However, I'm getting the following error when calling broccoli serve:

[broccoli-compass] 错误:没有那个文件或目录 -/Users/my.name/Documents/Code/broccoli-ember/tmp/tree_merger-tmp_dest_dir-4rW9S0CD.tmp/styles/app.scss

知道我在这里遗漏了什么吗?

Any idea what I'm missing here?

推荐答案

我将 brocfile 样式预处理更改为:

I changed the brocfile styles preprocess to:

var styles = 'styles'
styles = pickFiles(styles, {
  srcDir: '/',
  destDir: appNamespace + '/styles'
})
styles = preprocess(styles)

和 compileSass 调用:

and the compileSass call to:

var appCss = compileSass(appAndDependencies, appNamespace + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: appNamespace + '/styles',
    imagesDir: 'public/images/',
    cssDir: '/assets'
})

类似于这里的答案 - 在 Ember-CLI 项目中编译 Compass

Similar to the answer here - Compiling Compass in an Ember-CLI project

这篇关于在 broccoli-sample-app 中用 broccoli-compass 替换 broccoli-sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！