Compass Not Working

[chanakairugal]

Hi guys, im on
Win 10
Ng V 4.4.5

i was trying to use compass on this project. but each time after i import compass and try to use its mixing "ng serve" gives me this error. any clue about this.

File: G:/Workspaces/ng_testApp/tmp/sassplugin-input_base_path-rnAY3yeX.tmp/0/src
/styles/main.scss (3)
The Broccoli Plugin: [SASSPlugin] failed with:
Error: File to import not found or unreadable: compass
Parent style sheet: G:/Workspaces/ng_testApp/tmp/sassplugin-input_base_path-rnAY
3yeX.tmp/0/src/styles/main.scss
at Object.module.exports.renderSync (G:\Workspaces\ng_testApp\node_modules\n
ode-sass\lib\index.js:418:22)
at SASSPlugin.compile (G:\Workspaces\ng_testApp\node_modules\angular-cli\lib
\broccoli\angular-broccoli-sass.js:49:25)
at G:\Workspaces\ng_testApp\node_modules\angular-cli\lib\broccoli\angular-br
occoli-sass.js:30:12
at Array.forEach (native)
at SASSPlugin.build (G:\Workspaces\ng_testApp\node_modules\angular-cli\lib\b
roccoli\angular-broccoli-sass.js:28:22)
at G:\Workspaces\ng_testApp\node_modules\angular-cli\node_modules\broccoli-c
aching-writer\index.js:152:21
at lib$rsvp$$internal$$tryCatch (G:\Workspaces\ng_testApp\node_modules\angul
ar-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (G:\Workspaces\ng_testApp\node_modules
\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (G:\Workspaces\ng_testApp\node_modules\angula
r-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (G:\Workspaces\ng_testApp\node_modules\angular-cli\n
ode_modules\rsvp\dist\rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)

The broccoli plugin was instantiated at:
at SASSPlugin.Plugin (G:\Workspaces\ng_testApp\node_modules\angular-cli\node
modules\broccoli-plugin\index.js:10:31)
at SASSPlugin.CachingWriter [as constructor](G:Workspacesng_testAppnode
modulesangular-clinode_modulesbroccoli-caching-writerindex.js:21:10)
at new SASSPlugin (G:\Workspaces\ng_testApp\node_modules\angular-cli\lib\bro
ccoli\angular-broccoli-sass.js:20:12)
at Object.Plugin.build.exports.makeBroccoliTree (G:\Workspaces\ng_testApp\no
de_modules\angular-cli\lib\broccoli\angular-broccoli-sass.js:69:12)
at Angular2App._buildTree (G:\Workspaces\ng_testApp\node_modules\angular-cli
\lib\broccoli\angular2-app.js:125:27)
at new Angular2App (G:\Workspaces\ng_testApp\node_modules\angular-cli\lib\br
occoli\angular2-app.js:53:23)
at module.exports (G:\Workspaces\ng_testApp\angular-cli-build.js:10:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (G:\Workspaces\ng_t
estApp\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:5
5:19)
at Class.module.exports.Task.extend.init (G:\Workspaces\ng_testApp\node_modu
les\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
at new Class (G:\Workspaces\ng_testApp\node_modules\angular-cli\node_modules
\core-object\core-object.js:18:12)
at Class.module.exports.Task.extend.run (G:\Workspaces\ng_testApp\node_modul
es\angular-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19)
at G:\Workspaces\ng_testApp\node_modules\angular-cli\node_modules\angular-cl
i\lib\commands\serve.js:64:24
at lib$rsvp$$internal$$tryCatch (G:\Workspaces\ng_testApp\node_modules\angul
ar-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (G:\Workspaces\ng_testApp\node_modules
\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (G:\Workspaces\ng_testApp\node_modules\angula
r-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (G:\Workspaces\ng_testApp\node_modules\angular-cli\n
ode_modules\rsvp\dist\rsvp.js:1198:9)

[filipesilva]

Have you followed the instructions in https://github.com/angular/angular-cli#css-preprocessor-integration ?

[chanakairugal]

Yep, Its really work with lib sass. But when it comes to compass it didnt resolve the issue...

[filipesilva]

Ok, can you give me exact reproduction steps so I can try and debug it?

[chanakairugal]

sure thing.
as CLI says i did install node-sass and the compass-importer. its just fine without any compass snippet.
but if i include compass snippet this error will popup. i did try to modify node compass file. but didnt get any luck

[chanakairugal]

Hey @filipesilva i update the CLI and re-install all the plugins (node-sass and compass-importer) not its not gonna show that error any more. insted of that css not compiling as its should be. its only shows this chunk after rendering

.transition {
-webkit-transition: all false false;
-moz-transition: all false false false;
-o-transition: all false false false;
transition: all; }

but its quite fine when its without compass importer. but case is i really need compass for the project. any clue why this is happening?

Thanks

[stefankoerner]

@chanakairugal see #784 for a workaround

[chanakairugal]

@stefankoerner Nope it didnt work mate. also i do not understand why did he say to remove data row while its the key to link compass-importer

[filipesilva]

Closed as issue was 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.}