Devextreme: Icons font not resolvable by Webpack 3.11.0 (missing quotation marks)

[fubar-coder]

Steps to Reproduce:

1. npm install -g @angular/[email protected] to get webpack 3.11.0
2. ng new angular-tour-of-heroes
3. npm up --save
4. npm install devextreme devextreme-angular --save
5. ng eject to create the webpack.config.js
6. npm run build

I'm a web dev beginner, so I don't know how to use webpack directly, but it's relevant that webpack 3.11.0 isn't a preview release and the fact that angular/cli is a preview is (IMHO) meaningless.

Results You Received:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/devextreme/dist/css/dx.light.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Test-Projekte\Angular6\angular-tour-of-heroes\node_modules\devextreme\dist\css\dx.light.css:3219:12: Can't resolve 'icons/dxicons.woff)%20format(%27woff%27),%20url(icons/dxicons.ttf)%20format(%27truetype%27' in 'C:\Test-Projekte\Angular6\angular-tour-of-heroes\node_modules\devextreme\dist\css'

  3217 | @font-face {
  3218 |   font-family: 'DXIcons';
> 3219 |   src: url(icons/dxicons.woff) format('woff'), url(icons/dxicons.ttf) format('truetype');
       |            ^
  3220 |   font-weight: normal;
  3221 |   font-style: normal;

Results You Expected:

A successful build

Environment Details:

DevExtreme: 17.2.5 (also tested with 18.1.1-pre-18037)
Webpack: 3.11.0
OS: Win 10 1709

Proposed fix

Just put the value of url() into quotation marks and webpack will be able to resolve the relative URL.

[jtsom]

Just encountered this same issue after updating to Angular CLI 1.7.1 and Angular 5.2.6:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/devextreme/dist/css/dx.carmine.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\John Tsombakos\Desktop\ag-devextreme\node_modules\devextreme\dist\css\dx.carmine.css:3219:12: Can't resolve 'icons/dxicons.woff)%20format(%27woff%27),%20url(icons/dxicons.ttf)%20format(%27truetype%27' in 'C:\Users\John Tsombakos\Desktop\ag-devextreme\node_modules\devextreme\dist\css'

  3217 | @font-face {
  3218 |   font-family: 'DXIcons';
> 3219 |   src: url(icons/dxicons.woff) format('woff'), url(icons/dxicons.ttf) format('truetype');
       |            ^
  3220 |   font-weight: normal;
  3221 |   font-style: normal;

[GoshaFighten]

Related:
https://github.com/webpack/webpack/issues/6548
https://github.com/postcss/postcss-loader/issues/337
https://github.com/angular/angular-cli/issues/9726

[GoshaFighten]

The Angular CLI team fixed this issue in their GitHub repository. So, the fix should be available in Angular CLI of version 1.7.2.

[RezaRahmati]

Having same issue with Angular CLI: 8.3.4