SCSS 'WebP' image load #6526
Description
Bug Report or Feature Request (mark with an x)
- [ ] bug report -> please search issues before submitting
- [x] feature request
Versions.
"@angular/compiler-cli": "4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"autoprefixer": "^6.5.3",
"codelyzer": "~2.0.0",
"css-loader": "^0.27.3",
"cssnano": "^3.10.0",
"exports-loader": "^0.6.3",
"file-loader": "^0.10.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"json-loader": "^0.5.4",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-sourcemap-loader": "^0.3.7",
"less-loader": "^4.0.2",
"postcss-loader": "^1.3.3",
"postcss-url": "^5.1.2",
"protractor": "~5.1.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"stylus-loader": "^3.0.1",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0",
"url-loader": "^0.5.7",
"webpack-dev-server": "~2.4.2"
Repro steps.
styles.scss
.earth {
...
background: url("src/assets/earthSpin1.webp") left center;
...
}.angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "geoasfront",
"ejected": false
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [ ],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {
}
}
}
run
ng build --prod --output-hashing none
The log given by the failure.
ERROR in ./src/assets/earthSpin1.webp
Module parse failed: C:\GISTORIS\Solution\Iac.Toris.Gis.Web2\frontend\src\assets\earthSpin1.webp Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src/styles.scss 18:232-284
@ multi ./src/styles.scss
Desired functionality.
Need to enable WebP image format to default loader.
Mention any other details that might be useful.
All working fine (but whithout ng) if eject webpack.config.js and edit it like that:
...
{
"test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|cur|ani)$/,
...
},
...