Skip to content

how can i use compasss with cli #784

Closed

Description

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

Activity

  1. pkamdem commented on May 16, 2016

    @pkamdem
    Contributor

    @RandyBoy

    Would you mind following the issue template?

  2. RandyBoy commented on May 17, 2016

    @RandyBoy
    Author

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

  3. demetrio812 commented on May 22, 2016

    @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

  4. Brocco commented on May 24, 2016

    @Brocco
    Contributor

    @jkuri Can you explain the purpose of this line?

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

    link

  5. added
    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
    on Jun 4, 2016
  6. filipesilva commented on Jul 27, 2016

    @filipesilva
    Contributor

    This issue has been made obsolete by #1455.

  7. angular-automatic-lock-bot commented on Sep 5, 2019

    @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.

  8. locked and limited conversation to collaborators on Sep 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgenttype: bug/fix

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions