From 56a7e0d630ab88d4400b5519c8bc46e50e3884a6 Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 08:36:03 +0500 Subject: [PATCH 1/8] Added Global css support --- config/webpack.common.js | 27 ++++++++++++++++++++------- config/webpack.dev.js | 9 +++++++++ config/webpack.prod.js | 13 +++++++++++-- config/webpack.test.js | 35 ++++++++++++++++++++++++++++------- package.json | 3 ++- 5 files changed, 70 insertions(+), 17 deletions(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index cc220de969..096180c23c 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -13,6 +13,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; const HtmlElementsPlugin = require('./html-elements-plugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); /* * Webpack Constants @@ -44,7 +45,7 @@ module.exports = { * * See: http://webpack.github.io/docs/configuration.html#cache */ - //cache: false, + //cache: false, /* * The entry point for the bundle @@ -55,8 +56,8 @@ module.exports = { entry: { 'polyfills': './src/polyfills.browser.ts', - 'vendor': './src/vendor.browser.ts', - 'main': './src/main.browser.ts' + 'vendor': './src/vendor.browser.ts', + 'main': './src/main.browser.ts' }, @@ -101,7 +102,7 @@ module.exports = { * * See: https://github.com/wbuchwalter/tslint-loader */ - // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] }, + // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] }, /* * Source map loader support for *.js files @@ -136,7 +137,7 @@ module.exports = { /* * Typescript loader support for .ts and Angular 2 async routes via .async.ts * Replace templateUrl and stylesUrl with require() - * + * * See: https://github.com/s-panferov/awesome-typescript-loader * See: https://github.com/TheLarkInn/angular2-template-loader */ @@ -156,6 +157,17 @@ module.exports = { loader: 'json-loader' }, + /* + * ExtractTextPlugin, style loader and css loader support for global *.css files + * Inject css files as globally in a bundle + * + */ + { + test: /\.css$/, + exclude: helpers.root('src', 'app'), + loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap') + }, + /* * to string and css loader support for *.css files * Returns file content as string @@ -163,6 +175,7 @@ module.exports = { */ { test: /\.css$/, + include: helpers.root('src', 'app'), loaders: ['to-string-loader', 'css-loader'] }, @@ -176,9 +189,9 @@ module.exports = { loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }, - + /* File loader for supporting images, for example, in CSS files. - */ + */ { test: /\.(jpg|png|gif)$/, loader: 'file' diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 7442a06b31..a980858b8f 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -10,6 +10,7 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co * Webpack Plugins */ const DefinePlugin = require('webpack/lib/DefinePlugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); /** * Webpack Constants @@ -116,6 +117,14 @@ module.exports = webpackMerge(commonConfig, { 'HMR': METADATA.HMR, } }), + + /** + * Plugin: ExtractTextPlugin + * Description: Load css file separately in a bundle + * + * See: https://github.com/webpack/extract-text-webpack-plugin + */ + new ExtractTextPlugin('[name].css'), ], /** diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 1f2ec53c5e..06436da24e 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -16,6 +16,7 @@ const IgnorePlugin = require('webpack/lib/IgnorePlugin'); const DedupePlugin = require('webpack/lib/optimize/DedupePlugin'); const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); const WebpackMd5Hash = require('webpack-md5-hash'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); /** * Webpack Constants @@ -157,8 +158,8 @@ module.exports = webpackMerge(commonConfig, { beautify: false, //prod - mangle: { screw_ie8 : true }, //prod - compress: { screw_ie8: true }, //prod + mangle: {screw_ie8: true}, //prod + compress: {screw_ie8: true}, //prod comments: false //prod }), @@ -174,6 +175,14 @@ module.exports = webpackMerge(commonConfig, { helpers.root('config/modules/angular2-hmr-prod.js') ), + /** + * Plugin: ExtractTextPlugin + * Description: Load css file separately in a bundle + * + * See: https://github.com/webpack/extract-text-webpack-plugin + */ + new ExtractTextPlugin('[name].[hash].css'), + /** * Plugin: IgnorePlugin * Description: Don’t generate modules for requests matching the provided RegExp. diff --git a/config/webpack.test.js b/config/webpack.test.js index 80cbcdef6f..d71c8ae356 100644 --- a/config/webpack.test.js +++ b/config/webpack.test.js @@ -9,6 +9,7 @@ const helpers = require('./helpers'); */ const ProvidePlugin = require('webpack/lib/ProvidePlugin'); const DefinePlugin = require('webpack/lib/DefinePlugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); /** * Webpack Constants @@ -86,10 +87,11 @@ module.exports = { test: /\.js$/, loader: 'source-map-loader', exclude: [ - // these packages have problems with their sourcemaps - helpers.root('node_modules/rxjs'), - helpers.root('node_modules/@angular') - ]} + // these packages have problems with their sourcemaps + helpers.root('node_modules/rxjs'), + helpers.root('node_modules/@angular') + ] + } ], @@ -128,7 +130,18 @@ module.exports = { * * See: https://github.com/webpack/json-loader */ - { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] }, + {test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')]}, + + /** + * ExtractTextPlugin, style loader and css loader support for global *.css files + * Inject css files as globally in a bundle + * + */ + { + test: /\.css$/, + exclude: [helpers.root('src/index.html'), helpers.root('src', 'app')], + loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap') + }, /** * Raw loader support for *.css files @@ -136,7 +149,7 @@ module.exports = { * * See: https://github.com/webpack/raw-loader */ - { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], exclude: [helpers.root('src/index.html')] }, + {test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], include: helpers.root('src', 'app')}, /** * Raw loader support for *.html @@ -144,7 +157,7 @@ module.exports = { * * See: https://github.com/webpack/raw-loader */ - { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] } + {test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')]} ], @@ -200,6 +213,14 @@ module.exports = { } }), + /** + * Plugin: ExtractTextPlugin + * Description: Load css file separately in a bundle + * + * See: https://github.com/webpack/extract-text-webpack-plugin + */ + new ExtractTextPlugin('[name].css'), + ], diff --git a/package.json b/package.json index ea5b917f7f..875604cd12 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "@angularclass/request-idle-callback": "^1.0.7", "@angularclass/conventions-loader": "^1.0.2", "angular2-template-loader": "^0.4.0", - + "ie-shim": "^0.1.0", "core-js": "^2.4.0", "rxjs": "5.0.0-beta.6", @@ -144,6 +144,7 @@ "expose-loader": "^0.7.1", "file-loader": "^0.9.0", "to-string-loader": "^1.1.4", + "extract-text-webpack-plugin": "^1.0.1", "html-webpack-plugin": "^2.21.0", "copy-webpack-plugin": "^3.0.1", From ebddf9550389f1d5aa8b25a69847a83f7b27c700 Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 08:36:54 +0500 Subject: [PATCH 2/8] Added Example of Global css support --- src/app/app.component.ts | 1 - src/app/app.style.css | 5 ----- src/main.browser.ts | 4 ++++ src/styles/style.css | 4 ++++ 4 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 src/styles/style.css diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b174f58a3c..9c56c7e6b9 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -11,7 +11,6 @@ import { AppState } from './app.service'; */ @Component({ selector: 'app', - encapsulation: ViewEncapsulation.None, styleUrls: [ './app.style.css' ], diff --git a/src/app/app.style.css b/src/app/app.style.css index 2fc581c0aa..1d78771128 100644 --- a/src/app/app.style.css +++ b/src/app/app.style.css @@ -1,8 +1,3 @@ -html, body{ - height: 100%; - font-family: Arial, Helvetica, sans-serif -} - span.active { background-color: gray; } diff --git a/src/main.browser.ts b/src/main.browser.ts index 3a35786d86..e66e02996a 100644 --- a/src/main.browser.ts +++ b/src/main.browser.ts @@ -9,6 +9,10 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; import { PLATFORM_PROVIDERS } from './platform/browser'; import { ENV_PROVIDERS, decorateComponentRef } from './platform/environment'; +/* +* Global styles +*/ +import './styles/style.css'; /* * App Component diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000000..11d4e0db76 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,4 @@ +html, body { + height: 100%; + font-family: Arial, Helvetica, sans-serif +} From 8c0776759c36f910a2301cc104f14fb3813ba0c2 Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 09:16:39 +0500 Subject: [PATCH 3/8] Fixed url resolution issue is css --- config/webpack.common.js | 2 +- config/webpack.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index 096180c23c..d005ea17fd 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -176,7 +176,7 @@ module.exports = { { test: /\.css$/, include: helpers.root('src', 'app'), - loaders: ['to-string-loader', 'css-loader'] + loaders: ['exports-loader?module.exports.toString()', 'css-loader'] }, /* Raw loader support for *.html diff --git a/config/webpack.test.js b/config/webpack.test.js index d71c8ae356..d91fa53849 100644 --- a/config/webpack.test.js +++ b/config/webpack.test.js @@ -149,7 +149,7 @@ module.exports = { * * See: https://github.com/webpack/raw-loader */ - {test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], include: helpers.root('src', 'app')}, + {test: /\.css$/, loaders: ['exports-loader?module.exports.toString()', 'css-loader'], include: helpers.root('src', 'app')}, /** * Raw loader support for *.html From 866671bb397299d1c6ffb242a19242db269e026c Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 09:33:28 +0500 Subject: [PATCH 4/8] Just added '-loader' postfix after css loader --- config/webpack.common.js | 2 +- config/webpack.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index 096180c23c..b2b7c70ed8 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -165,7 +165,7 @@ module.exports = { { test: /\.css$/, exclude: helpers.root('src', 'app'), - loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap') + loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') }, /* diff --git a/config/webpack.test.js b/config/webpack.test.js index d71c8ae356..e475000302 100644 --- a/config/webpack.test.js +++ b/config/webpack.test.js @@ -140,7 +140,7 @@ module.exports = { { test: /\.css$/, exclude: [helpers.root('src/index.html'), helpers.root('src', 'app')], - loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap') + loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') }, /** From 1fecb4782bb3b361ff4d011c15b20993f80d1d4e Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 10:21:34 +0500 Subject: [PATCH 5/8] Remove sourcemap option from css loader --- config/webpack.common.js | 2 +- config/webpack.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index b2b7c70ed8..c4f42d03db 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -165,7 +165,7 @@ module.exports = { { test: /\.css$/, exclude: helpers.root('src', 'app'), - loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') + loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, /* diff --git a/config/webpack.test.js b/config/webpack.test.js index e475000302..7e472cea19 100644 --- a/config/webpack.test.js +++ b/config/webpack.test.js @@ -140,7 +140,7 @@ module.exports = { { test: /\.css$/, exclude: [helpers.root('src/index.html'), helpers.root('src', 'app')], - loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') + loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, /** From 33e725c902ba7f2e0f05ae780ca2d8d0aee17dc4 Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 10:33:38 +0500 Subject: [PATCH 6/8] Update doc: sass support --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index e7cd64496a..6dc2079c6d 100644 --- a/README.md +++ b/README.md @@ -309,6 +309,8 @@ import * as _ from 'lodash'; * check out https://github.com/cnpm/cnpm * If you're looking to add Angular 2 Material Design * check out the [material2](https://github.com/AngularClass/angular2-webpack-starter/tree/material2) branch +* If you're looking Sass/Scss support + * check out the [sass-support](https://github.com/AngularClass/angular2-webpack-starter/tree/sass-support) branch * node-pre-gyp ERR in npm install (Windows) * install Python x86 version between 2.5 and 3.0 on windows see issue [#626](https://github.com/AngularClass/angular2-webpack-starter/issues/626) * `Error:Error: Parse tsconfig error [{"messageText":"Unknown compiler option 'lib'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'strictNullChecks'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'baseUrl'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'paths'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'types'.","category":1,"code":5023}]` From 8e0d39c928b990d061e8e693c5b333f835bb26b3 Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Sun, 14 Aug 2016 11:23:44 +0500 Subject: [PATCH 7/8] Added more files of ext. in RegEx matcher for file loader --- config/webpack.common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index 326b60c1e3..49808fca57 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -193,7 +193,7 @@ module.exports = { /* File loader for supporting images, for example, in CSS files. */ { - test: /\.(jpg|png|gif)$/, + test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file' } ] From adfff0bf77de3161daf19363ffb0aee6c7183147 Mon Sep 17 00:00:00 2001 From: Ahmed Raza Date: Fri, 26 Aug 2016 07:42:37 +0500 Subject: [PATCH 8/8] Fixes css loader issue and change cheap-module-source-map to cheap-module-eval-source-map --- .gitignore | 1 + config/webpack.common.js | 9 ++++++--- config/webpack.dev.js | 2 +- config/webpack.test.js | 7 +++++-- package.json | 2 ++ src/app/+detail/index.ts | 2 +- src/styles/style.css | 12 ++++++++++++ 7 files changed, 28 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index 0d501b76e3..9762e63c55 100644 --- a/.gitignore +++ b/.gitignore @@ -52,6 +52,7 @@ npm-debug.log /src/*/dist/ /dist/** .webpack.json +*.bak # Doc # /doc/ diff --git a/config/webpack.common.js b/config/webpack.common.js index 2852ecfe49..d8b492bb8e 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -154,7 +154,10 @@ module.exports = { { test: /\.css$/, exclude: helpers.root('src', 'app'), - loader: ExtractTextPlugin.extract('style-loader', 'css-loader') + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader?-url' + }) }, /* @@ -165,7 +168,7 @@ module.exports = { { test: /\.css$/, include: helpers.root('src', 'app'), - loaders: ['exports-loader?module.exports.toString()', 'css-loader'] + loaders: ['exports-loader?module.exports.toString()', 'css-loader?-url'] }, /* Raw loader support for *.html @@ -180,7 +183,7 @@ module.exports = { }, /* File loader for supporting images, for example, in CSS files. - */ + */ { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file' diff --git a/config/webpack.dev.js b/config/webpack.dev.js index a980858b8f..b24ec0f4a4 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -53,7 +53,7 @@ module.exports = webpackMerge(commonConfig, { * See: http://webpack.github.io/docs/configuration.html#devtool * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps */ - devtool: 'cheap-module-source-map', + devtool: 'cheap-module-eval-source-map', /** * Options affecting the output of the compilation. diff --git a/config/webpack.test.js b/config/webpack.test.js index 9c6eb9d23e..29edff67cc 100644 --- a/config/webpack.test.js +++ b/config/webpack.test.js @@ -140,7 +140,10 @@ module.exports = { { test: /\.css$/, exclude: [helpers.root('src/index.html'), helpers.root('src', 'app')], - loader: ExtractTextPlugin.extract('style-loader', 'css-loader') + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader?-url' + }) }, /** @@ -149,7 +152,7 @@ module.exports = { * * See: https://github.com/webpack/raw-loader */ - {test: /\.css$/, loaders: ['exports-loader?module.exports.toString()', 'css-loader'], include: helpers.root('src', 'app')}, + {test: /\.css$/, loaders: ['exports-loader?module.exports.toString()', 'css-loader?-url'], include: helpers.root('src', 'app')}, /** * Raw loader support for *.html diff --git a/package.json b/package.json index 4ee399861c..eeb5f9ece0 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "es6-promise-loader": "^1.0.1", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", + "extract-text-webpack-plugin": "^2.0.0-beta.3", "file-loader": "^0.9.0", "gh-pages": "^0.11.0", "html-webpack-plugin": "^2.21.0", @@ -115,6 +116,7 @@ "remap-istanbul": "^0.6.3", "rimraf": "^2.5.2", "source-map-loader": "^0.1.5", + "string-replace-loader": "^1.0.3", "style-loader": "^0.13.1", "to-string-loader": "^1.1.4", "ts-helpers": "1.1.1", diff --git a/src/app/+detail/index.ts b/src/app/+detail/index.ts index e7e720c3eb..3f2c745384 100644 --- a/src/app/+detail/index.ts +++ b/src/app/+detail/index.ts @@ -1,4 +1,4 @@ -import { BrowserModule } from '@angular/platform-browser' +import { BrowserModule } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; diff --git a/src/styles/style.css b/src/styles/style.css index 11d4e0db76..5489dd9e9f 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -2,3 +2,15 @@ html, body { height: 100%; font-family: Arial, Helvetica, sans-serif } + +body:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + opacity: 0.02; + background-image: url(../assets/img/angular-logo.png); +}