feat: add sass support

[wearska]

Considering that all the styles end up inside the head tag of our html, I think it's safe to also generate sass files with new components, import them manually in the main "app.scss" file (located inside the "app" folder), which gets compiled to "app.css" and is linked in our index.html.

Also keep the generated .css files if anyone wants to use them

[IgorMinar]

listing every single scss file here is too error prone and besides, angular compiler will fetch all css files and prefix all selectors by default to provide css isolation. so we definitely don't want to list individual files here.

[IgorMinar]

We should support sass out of the box, but not like this.

• transpile all scss files via the sass plugin as you have it
• do not concat all scss files via app.scss
• modify blueprints to generate scss file instead of css file for each component
• keep component blueprint requesting the css file (

  angular-cli/addon/ng2/blueprints/component/files/src/app/components/__name__/__name__.ts

  Line 7 in 0f66aac

  styleUrls: ['app/components/<%= dasherizedModuleName %>/<%= dasherizedModuleName %>.css'],

  )
• ensure that paths in the dist align so that Angular fetches the css file one compiling the component in the browser

a lot of this stuff will change once we move the template compilation to the build step, but for now the above should do

[wearska]

Yeah but, If you compile all .scss files in place you would need to point each file to the variables and mixins, if that file uses any of them.

[IgorMinar]

That sounds like a good thing to me. That's exactly what imports in the
typescript code do.
On Thu, Dec 10, 2015 at 2:14 AM wearska [email protected] wrote:

Yeah but, If you compile all .scss files in place you would need to point
each file to the variables and mixins, if that file uses any of them.

—
Reply to this email directly or view it on GitHub
#97 (comment).

[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.}