how can i use compasss with cli

[RandyBoy]

E:\webappdev\ems>ng serve
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
File: E:/webappdev/ems/tmp/compass_plugin-input_base_path-uRIbn5CS.tmp/0/src/app
/+routedemo/routedemo.component.scss (1)
The Broccoli Plugin: [CompassPlugin] failed with:
Error: no mixin named transition

Backtrace:
tmp/compass_plugin-input_base_path-uRIbn5CS.tmp/0/src/app/+routedemo/rou
tedemo.component.scss:1
at Object.module.exports.renderSync (E:\webappdev\ems\node_modules\node-sass
\lib\index.js:418:22)
at CompassPlugin.compile (E:\webappdev\ems\node_modules\angular-cli\lib\broc
coli\angular-broccoli-compass.js:43:23)
at E:\webappdev\ems\node_modules\angular-cli\lib\broccoli\angular-broccoli-c
ompass.js:31:12
at Array.forEach (native)
at CompassPlugin.build (E:\webappdev\ems\node_modules\angular-cli\lib\brocco
li\angular-broccoli-compass.js:29:24)
at E:\webappdev\ems\node_modules\angular-cli\node_modules\broccoli-caching-w
riter\index.js:152:21
at lib$rsvp$$internal$$tryCatch (E:\webappdev\ems\node_modules\angular-cli\n
ode_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (E:\webappdev\ems\node_modules\angular
-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1048:17
)
at lib$rsvp$$internal$$publish (E:\webappdev\ems\node_modules\angular-cli\no
de_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (E:\webappdev\ems\node_modules\angular-cli\node_modu
les\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1198:9)
at doNTCallback0 (node.js:428:9)
at process._tickCallback (node.js:357:13)

The broccoli plugin was instantiated at:
at CompassPlugin.Plugin (E:\webappdev\ems\node_modules\angular-cli\node_modu
les\broccoli-caching-writer\node_modules\broccoli-plugin\index.js:10:31)
at CompassPlugin.CachingWriter [as constructor](E:webappdevemsnode_modul
esangular-clinode_modulesbroccoli-caching-writerindex.js:21:10)
at new CompassPlugin (E:\webappdev\ems\node_modules\angular-cli\lib\broccoli
\angular-broccoli-compass.js:22:12)
at Object.Plugin.build.exports.makeBroccoliTree (E:\webappdev\ems\node_modul
es\angular-cli\lib\broccoli\angular-broccoli-compass.js:57:12)
at Angular2App._buildTree (E:\webappdev\ems\node_modules\angular-cli\lib\bro
ccoli\angular2-app.js:110:27)
at new Angular2App (E:\webappdev\ems\node_modules\angular-cli\lib\broccoli\a
ngular2-app.js:42:23)
at module.exports (E:\webappdev\ems\angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (E:\webappdev\ems\n
ode_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
at Class.module.exports.Task.extend.init (E:\webappdev\ems\node_modules\angu
lar-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
at new Class (E:\webappdev\ems\node_modules\angular-cli\node_modules\angular
-cli\node_modules\core-object\core-object.js:18:12)
at Class.module.exports.Task.extend.run (E:\webappdev\ems\node_modules\angul
ar-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19)
at E:\webappdev\ems\node_modules\angular-cli\node_modules\angular-cli\lib\co
mmands\serve.js:64:24
at lib$rsvp$$internal$$tryCatch (E:\webappdev\ems\node_modules\angular-cli\n
ode_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (E:\webappdev\ems\node_modules\angular
-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (E:\webappdev\ems\node_modules\angular-cli\no
de_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (E:\webappdev\ems\node_modules\angular-cli\node_modu
les\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)

[pkamdem]

@RandyBoy

Would you mind following the issue template?

[RandyBoy]

I want to use compass, it should be how to configure？

[demetrio812]

Hello, I had exactly the same problem, if I edit the file node_modules/angular-cli/lib/broccoli/angular-broccoli-compass.js and remove the data row in:

 let sassOptions = Object.assign(this.options, {
       //data: '@import "compass"; .transition { @include transition(all); }',
       file: fileName,
       includePaths: [inputPath].concat(this.options.inputPaths || []),
       importer: compass
});

It works...it seems that the import doesn't work properly, any idea?

Thanks,
Dem

[Brocco]

@jkuri Can you explain the purpose of this line?

data: '@import "compass"; .transition { @include transition(all); }'

link

[filipesilva]

This issue has been made obsolete by #1455.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}