Splash fa-spinner not working on webpack projects

[szewczyk-it]

I'm submitting a bug report

• Aurelia Skeleton Version
  skeleton-esnext-webpack
  skeleton-typescript-webpack

• Framework Version:
  > npm ls aurelia-framework

+-- aurelia-bootstrapper@2.1.1
| `-- aurelia-framework@1.1.4  deduped

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  8.1.4

• NPM Version:
  5.3.0

• Webpack AND Version
  webpack 3.3.0

• Browser:
  Chrome 60 | Firefox 55 | Edge 40 | IE 11

• Language:
  all

Current behavior:
No rounding splash fa-spinner. Only text 'Aurelia Navigation Skeleton'

Steps

• git clone https://github.com/aurelia/skeleton-navigation.git
• cd skeleton-navigation/skeleton-esnext-webpack
• npm install
• npm start

Expected/desired behavior:
Rounding splash like in skeleton-esnext

• What is the expected behavior?
  Rounding splash like in skeleton-esnext

• What is the motivation / use case for changing the behavior?
  Webpack projects should behavior like jspm projects.

[niieani]

fa-spinner works, but you have to use extractCss, which is disabled by default in development mode (for the reasons of speed).

[szewczyk-it]

Oh, sorry... Now I can see:

npm start -- build
npm start -- serve

can you explain how can I quick enable extractCss in development?

[niieani]

Sure @szewczyk-it,

skeleton-navigation/skeleton-typescript-webpack/package-scripts.js

Lines 52 to 70 in 20fc09a

	webpack: {
	default: 'nps webpack.server',
	build: {
	before: rimraf('dist'),
	default: 'nps webpack.build.production',
	development: {
	default: series(
	'nps webpack.build.before',
	'webpack --progress -d'
	),
	extractCss: series(
	'nps webpack.build.before',
	'webpack --progress -d --env.extractCss'
	),
	serve: series.nps(
	'webpack.build.development',
	'serve'
	),
	},

As you can see from the script definition, you can run:

npm start -- webpack.build.development.extractCss

[szewczyk-it]

Many thanks @niieani 😄