feat(webpack): Support to add custom/third party css/sccs

[sirajc]

Version/OS Information:

1. Windows 7
2. ng --version.
   angular-cli: local (v1.0.0-beta.10, branch: master)
   node: 4.4.7
   os: win32 x64

1. Repro steps.
   This is CLI App. Have few css files/third party css that needs to be included in the app

import './assets/vendor/paper/bootstrap.min.css';
import './assets/vendor/hint.min.css';

Having above in polyfill.ts or main.ts has no effect, css are not included at all

As a workaround for now, I have included this in index.html

<link rel="stylesheet" href="assets/vendor/paper/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="assets/vendor/hint.min.css" media="screen">

This works fine, but we loose webpack features in this.

Expectation: webpack starters support including css using import, It is expected that cli supports the same behaviour

Important:
I also have app.scss which is common styles for app, due this limitation I cannot include it, for now as a workaround, I have added this in app.component as below

 styleUrls: ['app.component.scss'],
 encapsulation: ViewEncapsulation.None

This way I have app.scss available for whole app, but this is clearly a hack

PS: No error in logs

[aciccarello]

Possibly related #1457

[sirajc]

@aciccarello #1457 is about importing files inside your sass file. This is about importing sass/css files in your typescript file. Which will enable webpack to load them in your page.
Also that one is systemjs-brocolli and this is webpack

[filipesilva]

@sirajc I understand what you are requesting, but disagree with the approach you desire.

Importing css/sass/etc in a code file is a webpack feature, and thus nonstandard. If we were to move to another build system in the future your code would break. As far as the user application is concerned, the CLI is the build system - not webpack. The CLI encapsulates webpack and is providing an abstraction on top of it, and the user shouldn't assume there's webpack there.

It's true that importing .scss files in styleUrls is also nonstandard, but doesn't change the fundamental syntax of the language (TS) and instead stealthily adds sass support to a Angular 2 feature. Not ideal, but not as bad.

Your workaround essentially disables A2 style encapsulation to provide a global stylesheet, which is also not the ideal approach.

The bigger problem to resolve here is importing arbitrary css outside of angular 2. This is needed for global styles and also to prevent the dreaded FOUC (flash of unstyled content).

[sirajc]

I agree with the black boxing of webpack, I am not a webpack expert either.
Mapping .scss is webpack specific as well, had to manually update the extension for all components moving from beta.10 to webpack, but that is acceptable
For global stylesheet, I am using ViewEncapsulation.None only for app.component to make it global style, rest all components will have encapsulation available.

Webpack version of CLI is much better, faster and feature rich than earlier and thanks you and the team for that.

Coming to this case, We need to enable some configuration or mechanism to load the global stylesheet and third party stylesheet (Twitter Bootstrap would be mostly required by lots of projects). If not import then something else, but there should be one.
Discussions are open

[TheLarkInn]

Also related to #1465

[sirajc]

@TheLarkInn #1465 talks about creating a module for app like @app, which is like configuring an alias in resolve of webpack config. How will this help in bundling and loading css/scss.

[filipesilva]

I've been talking with @TheLarkInn to see if we could come up with a overall solution script/link tags, and we came up with something that seems to cover the needed bases in an elegant enough way:

• specify in angular-cli.json the main app entry points: main.ts, scripts.ts (replaces polyfills.ts), styles.css (can also be sass/etc)
• have the build system use these entries (currently main.ts and polyfills.ts are hardcoded)
• on a CSS project, use css imports to load all the other needed CSS files
• use scripts.ts to load all needed js that would normally go on script tags (users can still add script tags on index.html for stuff hosted on CDNs)
• move ./public into ./src/public so that relative paths are as expected and we can import files from it with editor support

The key for me is using CSS imports - it's a part of standards and allows webpack to gobble it up on non sass/etc projects. That way all CSS entry points can be handled in the same consistent way.

The CLI team is trying to reach a good solution as fast as possible as this issue is holding up a fair number of people, so please comment on this and other proposed solutions.

[jkuri]

I opened a PR for this issue: #1492 but I don't know if it is the right solution and it need to be discussed.

My solution generates single app.css file from ./public/**/*.{sass,scss,less,stly} which can be included in index.html.
The pattern to include separate .css file is right as the styles starts loading at the same time as bundle scripts.
The main problem is that the files are not loaded in the right order but the solution can be to have an entry point like app.{sass,scss,less,styl} and all other files can be @import-ed in that entry point. I also think that entry point should be configurable in the cli-config.

Any suggestions and fixes are very welcome.

[sirajc]

• 👍 for having configuration in angular-cli.json for scripts, I was missing vendor.ts and this will help us configure it the way we like
• I am not sure of browser support for @import in css, but yes it should be trivial with scss/sass
• instead of moving public we can have src/assets where we can place css, and other external scripts which are not coming from node_modules

Thanks @filipesilva this looks like a good start. Also it would be good if the scripts and compiled css (from sass/scss) also has the hash appended for bursting cache in the prod build.

[filipesilva]

@sirajc browsers wouldn't need support for the native css imports, as webpack would bundle it.

[Meligy]

@filipesilva (in response to #1459 (comment) )

If you are writing:

import './assets/vendor/paper/bootstrap.min.css';

Inside main.ts, and this is an entry point already, I wonder why this wouldn't work as-is?

Of course assuming you have the right loader for CSS in the webpack config, which raises a different but possibly related question about having a place where the CLI user can override parts of the webpack config, but that's a different issue.

[filipesilva]

@Meligy we don't want to use that pattern (importing .css in .ts) because it's webpack specific instead of a standard.