From 7a2e85cda2ddbd1c5efde9769c6d3eb1c25d9041 Mon Sep 17 00:00:00 2001 From: Colin Skow Date: Wed, 28 Dec 2016 03:08:05 -0800 Subject: [PATCH] (feature) build external stylesheets, support sass --- config/webpack.common.js | 16 +++++++++++++-- config/webpack.dev.js | 30 ++++++++++++++++++++++++++++ config/webpack.prod.js | 41 ++++++++++++++++++++++++++++++++++++++ package.json | 3 +++ src/app/app.component.css | 2 +- src/app/app.component.ts | 35 +++++++++++--------------------- src/app/app.module.ts | 3 +++ src/styles/_variables.scss | 1 + src/styles/headings.css | 3 +++ src/styles/styles.scss | 19 ++++++++++++++++++ 10 files changed, 127 insertions(+), 26 deletions(-) create mode 100644 src/styles/_variables.scss create mode 100644 src/styles/headings.css create mode 100644 src/styles/styles.scss diff --git a/config/webpack.common.js b/config/webpack.common.js index 2cc378321f..1f0919603a 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -120,13 +120,25 @@ module.exports = function (options) { }, /* - * to string and css loader support for *.css files + * to string and css loader support for *.css files (from Angular components) * Returns file content as string * */ { test: /\.css$/, - use: ['to-string-loader', 'css-loader'] + use: ['to-string-loader', 'css-loader'], + exclude: [helpers.root('src', 'styles')] + }, + + /* + * to string and sass loader support for *.scss files (from Angular components) + * Returns compiled css content as string + * + */ + { + test: /\.scss$/, + use: ['to-string-loader', 'css-loader', 'sass-loader'], + exclude: [helpers.root('src', 'styles')] }, /* Raw loader support for *.html diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 2368221801..69ade81509 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -84,6 +84,36 @@ module.exports = function (options) { libraryTarget: 'var', }, + module: { + + rules: [ + + /* + * css loader support for *.css files (styles directory only) + * Loads external css styles into the DOM, supports HMR + * + */ + { + test: /\.css$/, + use: ['style-loader', 'css-loader'], + include: [helpers.root('src', 'styles')] + }, + + /* + * sass loader support for *.scss files (styles directory only) + * Loads external sass styles into the DOM, supports HMR + * + */ + { + test: /\.scss$/, + use: ['style-loader', 'css-loader', 'sass-loader'], + include: [helpers.root('src', 'styles')] + }, + + ] + + }, + plugins: [ /** diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 0e2d6a086a..760b64db2d 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.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'); const IgnorePlugin = require('webpack/lib/IgnorePlugin'); const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin'); @@ -81,6 +82,38 @@ module.exports = function (env) { }, + module: { + + rules: [ + + /* + * Extract CSS files from .src/styles directory to external CSS file + */ + { + test: /\.css$/, + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader' + }), + include: [helpers.root('src', 'styles')] + }, + + /* + * Extract and compile SCSS files from .src/styles directory to external CSS file + */ + { + test: /\.scss$/, + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader!sass-loader' + }), + include: [helpers.root('src', 'styles')] + }, + + ] + + }, + /** * Add additional plugins to the compiler. * @@ -88,6 +121,14 @@ module.exports = function (env) { */ plugins: [ + /** + * Plugin: ExtractTextPlugin + * Description: Extracts imported CSS files into external stylesheet + * + * See: https://github.com/webpack/extract-text-webpack-plugin + */ + new ExtractTextPlugin('[name].[contenthash].css'), + /** * Plugin: WebpackMd5Hash * Description: Plugin to replace a standard webpack chunkhash with md5. diff --git a/package.json b/package.json index 9c003bff48..a050fd6066 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "css-loader": "^0.26.0", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", + "extract-text-webpack-plugin": "~2.0.0-beta.4", "file-loader": "^0.9.0", "gh-pages": "^0.12.0", "html-webpack-plugin": "^2.21.0", @@ -123,11 +124,13 @@ "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "1.8.1", "ngc-webpack": "^1.0.2", + "node-sass": "^4.1.1", "npm-run-all": "^4.0.0", "parse5": "^3.0.1", "protractor": "^4.0.10", "raw-loader": "0.5.1", "rimraf": "~2.5.4", + "sass-loader": "^4.1.1", "script-ext-html-webpack-plugin": "^1.3.2", "source-map-loader": "^0.1.5", "string-replace-loader": "1.0.5", diff --git a/src/app/app.component.css b/src/app/app.component.css index 2fc581c0aa..f78b9d9d28 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -3,6 +3,6 @@ html, body{ font-family: Arial, Helvetica, sans-serif } -span.active { +a.active { background-color: gray; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a4114465ed..6e36c314e3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -20,29 +20,18 @@ import { AppState } from './app.service'; ], template: `
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e46bfe01cc..a3364422fc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,6 +29,9 @@ import { AboutComponent } from './about'; import { NoContentComponent } from './no-content'; import { XLargeDirective } from './home/x-large'; +import '../styles/styles.scss'; +import '../styles/headings.css'; + // Application wide providers const APP_PROVIDERS = [ ...APP_RESOLVER_PROVIDERS, diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000000..0644143bc7 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1 @@ +$nav-button-color: #00838F; \ No newline at end of file diff --git a/src/styles/headings.css b/src/styles/headings.css new file mode 100644 index 0000000000..6fe295cfed --- /dev/null +++ b/src/styles/headings.css @@ -0,0 +1,3 @@ +h1 { + color: #00BCD4; +} \ No newline at end of file diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 0000000000..338ee53bc2 --- /dev/null +++ b/src/styles/styles.scss @@ -0,0 +1,19 @@ +/* this file will be extracted to main dist folder and is imported in index.html */ +/* This file is for setting global styles */ +@import 'variables'; + +nav { + margin-top: 16px; +} + +nav a { + background-color: $nav-button-color; + color: white; + padding: 8px 16px; + margin: 8px; + vertical-align: middle; + line-height: 1.25; + text-align: center; + text-decoration: none; + border-radius: 4px; +} \ No newline at end of file