Skip to content

SCSS 'WebP' image load #6526

Closed
Closed
@Gusachenko

Description

@Gusachenko

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)$/,
        ...
      },
...

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions