Angular-cli: Q: Using compass and other sass mixins with angular-cli?

[m-abs]

I can see compass support recently have been removed from angular-cli, is there a way to install it ourselves in our project?

What about other sass mixins like sass-flex-mixin? I've tried to install the node module and add the path ../node_modules/sass-flex-mixin/_flex.scss to styles in our angular-cli.json file, but I just get this error:

ERROR in ./src/app/app.component.scss
Module build failed: 
@import "sass-flex-mixin/_flex";
^
      File to import not found or unreadable: sass-flex-mixin/_flex

[leon]

sass / webpack has a special way of including other node_module packages.

if you write ~ before the import it goes and looks for it in node_modules

@import "~sass-flex-mixin/_flex";

https://github.com/jtangelder/sass-loader#imports

[filipesilva]

See https://github.com/angular/angular-cli/issues/1656 for a discussion regarding overriding webpack config.

Your imports can reference node_modules either by using ~ as @leon suggested, or by putting in the full relative path (../../node_modules/sass-flex-mixin/_flex).

[neha-s16]

@m-abs Were you able to include compass as a third party library? Or any other library?

[m-abs]

@neha-s16
We moved away from angular-cli, it was too much overhead for our needs.

[neha-s16]

@m-abs So what did you use instead? We are facing too many issues as well.

[m-abs]

@neha-s16
I wish I could give you simple answer with just one tool, but I can't.

Our main project is based on this seed-project https://github.com/NathanWalker/angular-seed-advanced.
It gives us the tooling needed to develop for web, desktop (electron) and mobile (nativescript) with a shared code base.

Our real problem were our modules and their demo projects.
We started out with the angular-cli, which isn't/wasn't geared towards developing modules, when we ran into this issue we decided to switch to gulp.
I've a baseproject we used: https://github.com/m-abs/typescript-baseproject/tree/ng2-ngc (sorry not up-to-date).
But after we ran into some problems with building and publishing modules with ngc-metadata, we started to move away from gulp and I think we'll end up using npm scripts for building all our modules. These scripts run tsc, ngc, tslint, node-sass and so on.

We have a simple web-app based on https://github.com/manekinekko/angular-aot-demo It's just a demo for building with AOT, but it was enough for our need.

I think I'd look at https://github.com/mgechev/angular-seed if I were to make a web-only app today. It's the project the seed we use is based upon.

[raff77]

See https://github.com/angular/angular-cli/wiki/stories-global-styles from
https://github.com/angular/angular-cli/issues/2880#issuecomment-288404419

[elegance-pooja-123]

if there is any issue in the scss mixin
Module build failed:
@import "~compass-mixins/lib/compass";
^
File to import not found or unreadable: ~compass-mixins/lib/compass.

so solution is

1) npm install compass-mixins
2) npm install compass-mixins --save that save your file or package.

then run
ng serve

[UmarEhsan]

Thanks @elegance-pooja-123

[moamen-ui]

The problem shows while run "ngc", but works good while run "ng serve" !

[angular-automatic-lock-bot[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._}