Skip to content

Getting CssSyntaxError with v1.7.0 on all SVGs with url() #9684

@djhojd

Description

@djhojd

Versions

Angular CLI: 1.7.0
Node: 6.11.0
OS: win32 x64
Angular: 5.2.0
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack-bundle-analyzer: 2.9.1
webpack: 3.11.0

Repro steps

  • In styles.scss
.btn {
  background: url(some.svg);
}
  • In some.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
<g id="Left_Arrows_Tips_-_Pressed__x28_Silver_x29_">
  <linearGradient id="Body_38_" ......></linearGradient>
  <path id="Body_5_" fill="url(#Body_38_)" ...... />
...
</g>

Observed behavior

ERROR in ./src/styles.scss
Module build failed: ModuleError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\path-to-file.scss:487:1: Can't resolve '%23Body_38_' in 'C:\project-folder

Desired behavior

Project should build without errors

Mention any other details that might be useful (optional)

The exact same setup, config and files work with CLI v1.6.8

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions