diff --git a/.bootstraprc b/.bootstraprc new file mode 100644 index 00000000..cf7f5c20 --- /dev/null +++ b/.bootstraprc @@ -0,0 +1,115 @@ +--- +# Output debugging info +# loglevel: debug + +# Major version of Bootstrap: 3 or 4 +bootstrapVersion: 4 + +# If Bootstrap version 4 is used - turn on/off flexbox model +useFlexbox: true + +# Webpack loaders, order matters +styleLoaders: + - style + - css + - sass + +# Extract styles to stand-alone css file +# Different settings for different environments can be used, +# It depends on value of NODE_ENV environment variable +# This param can also be set in webpack config: +# entry: 'bootstrap-loader/extractStyles' +extractStyles: false +# env: +# development: +# extractStyles: false +# production: +# extractStyles: true + + +# Customize Bootstrap variables that get imported before the original Bootstrap variables. +# Thus, derived Bootstrap variables can depend on values from here. +# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables. +# +# preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss + + +# This gets loaded after bootstrap/variables is loaded +# Thus, you may customize Bootstrap variables +# based on the values established in the Bootstrap _variables.scss file +# +# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss + + +# Import your custom styles here +# Usually this endpoint-file contains list of @imports of your application styles +# +# appStyles: ./path/to/your/app/styles/endpoint.scss + + +### Bootstrap styles +styles: + + # Mixins + mixins: true + + # Reset and dependencies + normalize: true + print: true + + # Core CSS + reboot: true + type: true + images: true + code: true + grid: true + tables: true + forms: true + buttons: true + + # Components + animation: true + dropdown: true + button-group: true + input-group: true + custom-forms: true + nav: true + navbar: true + card: true + breadcrumb: true + pagination: true + pager: true + labels: true + jumbotron: true + alert: true + progress: true + media: true + list-group: true + responsive-embed: true + close: true + + # Components w/ JavaScript + modal: true + tooltip: true + popover: true + carousel: true + + # Utility classes + utilities: true + utilities-background: true + utilities-spacing: true + utilities-responsive: true + +### Bootstrap scripts +scripts: + alert: true + button: true + carousel: true + collapse: true + dropdown: true + modal: true + popover: true + scrollspy: true + tab: true + tooltip: true + util: true \ No newline at end of file diff --git a/config/webpack.common.js b/config/webpack.common.js index b825671f..2c557c84 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -1,37 +1,18 @@ -/** - * @author: @AngularClass - */ - const webpack = require('webpack'); const helpers = require('./helpers'); -/* - * Webpack Plugins - */ const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; -/* - * Webpack Constants - */ const METADATA = { title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass', baseUrl: '/' }; -/* - * Webpack configuration - * - * See: http://webpack.github.io/docs/configuration.html#cli - */ + module.exports = { - /* - * Static metadata for index.html - * - * See: (custom attribute) - */ metadata: METADATA, /* @@ -77,11 +58,6 @@ module.exports = { }, - /* - * Options affecting the normal modules. - * - * See: http://webpack.github.io/docs/configuration.html#module - */ module: { /* @@ -116,14 +92,6 @@ module.exports = { ], - /* - * An array of automatically applied loaders. - * - * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. - * This means they are not resolved relative to the configuration file. - * - * See: http://webpack.github.io/docs/configuration.html#module-loaders - */ loaders: [ /* @@ -160,8 +128,17 @@ module.exports = { { test: /\.scss$/, - exclude: /node_modules/, - loader: 'raw-loader!sass-loader' + loaders: ['raw-loader','sass-loader'] + }, + + { + test: /\.(woff2?|ttf|eot|svg)$/, + loader: 'url?limit=10000' + }, + + { + test: /bootstrap\/dist\/js\/umd\//, + loader: 'imports?jQuery=jquery' }, /* Raw loader support for *.html @@ -240,8 +217,15 @@ module.exports = { new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main']) - }) + }), + new webpack.ProvidePlugin({ + jQuery: 'jquery', + $: 'jquery', + jquery: 'jquery', + "Tether": 'tether', + "window.Tether": "tether" + }) ], /* diff --git a/package.json b/package.json index da91dcef..f3bfd8a4 100644 --- a/package.json +++ b/package.json @@ -55,9 +55,13 @@ "@angular2-material/sidenav": "2.0.0-alpha.2", "@angular2-material/toolbar": "2.0.0-alpha.2", "angular2": "2.0.0-beta.15", + "bootstrap": "^4.0.0-alpha.2", + "bootstrap-loader": "^1.0.8", "core-js": "^2.2.2", + "jquery": "^2.2.3", "normalize.css": "^4.1.1", "rxjs": "5.0.0-beta.2", + "tether": "^1.2.4", "zone.js": "~0.6.11" }, "devDependencies": { @@ -79,12 +83,13 @@ "imports-loader": "^0.6.5", "istanbul-instrumenter-loader": "^0.2.0", "json-loader": "^0.5.4", - "node-sass": "^3.4.2", + "node-sass": "^3.5.3", "parse5": "^2.1.5", "phantomjs-polyfill": "0.0.2", "phantomjs-prebuilt": "^2.1.7", "raw-loader": "0.5.1", "remap-istanbul": "^0.5.1", + "resolve-url-loader": "^1.4.3", "rimraf": "^2.5.2", "sass-loader": "^3.2.0", "source-map-loader": "^0.1.5", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 41eeb30f..086819c1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -18,7 +18,7 @@ import {RouterActive} from './router-active'; providers: [ ], directives: [ RouterActive ], encapsulation: ViewEncapsulation.None, - styles: [ require('normalize.css'), require('../assets/scss/app.scss') ], + styles: [ require('normalize.css'), require('./app.scss') ], template: `
@@ -45,6 +45,37 @@ import {RouterActive} from './router-active'; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ 
this.appState.state = {{ appState.state | json }}