{"action":"closed","issue":{"url":"https://api.github.com/repos/angular/angular-cli/issues/2986","repository_url":"https://api.github.com/repos/angular/angular-cli","labels_url":"https://api.github.com/repos/angular/angular-cli/issues/2986/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular-cli/issues/2986/comments","events_url":"https://api.github.com/repos/angular/angular-cli/issues/2986/events","html_url":"https://github.com/angular/angular-cli/issues/2986","id":186762634,"number":2986,"title":"References to external resources do not work in @import'ed SCSS files","user":{"login":"rstropek","id":2341573,"avatar_url":"https://avatars.githubusercontent.com/u/2341573?v=3","gravatar_id":"","url":"https://api.github.com/users/rstropek","html_url":"https://github.com/rstropek","followers_url":"https://api.github.com/users/rstropek/followers","following_url":"https://api.github.com/users/rstropek/following{/other_user}","gists_url":"https://api.github.com/users/rstropek/gists{/gist_id}","starred_url":"https://api.github.com/users/rstropek/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rstropek/subscriptions","organizations_url":"https://api.github.com/users/rstropek/orgs","repos_url":"https://api.github.com/users/rstropek/repos","events_url":"https://api.github.com/users/rstropek/events{/privacy}","received_events_url":"https://api.github.com/users/rstropek/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-11-02T10:24:37Z","updated_at":"2016-11-02T16:28:40Z","closed_at":"2016-11-02T16:28:40Z","body":"### OS\r\nWindows 10\r\n\r\n### Version\r\n1.0.0-beta.19-3\r\n\r\n### Repro steps.\r\n1. Create new app: `ng init --style scss`\r\n1. Create folder `externalStyles` in the root folder of your app (adjacent to `src`)\r\n1. Place a small sample image `cat.png` in the `externalStyles` folder (this will be the resource we reference in the SCSS file)\r\n1. Place the following SCSS file called `myStyles.scss` in the `externalStyles` folder (references the previously created image)\r\n    ```\r\n    $image-dir: './' !default;\r\n    body { background-image: url('#{$image-dir}cat.png'); }\r\n    ```\r\n1. Add a reference to `myStyles.css` to `angular-cli.json` in the `styles` section:\r\n    ```\r\n    {\r\n      ...,\r\n      \"apps\": [ {\r\n        ...,\r\n        \"styles\": [\r\n          \"styles.scss\",\r\n          \"../externalStyles/myStyles.scss\"\r\n        ],\r\n        ...\r\n      } ],\r\n      ...\r\n    }\r\n    ```\r\n1. Run the app: `ng serve`. The image file will become part of the bundle and it will be correctly shown as the background image of the app.\r\n1. Remove the reference to `myStyles.scss` from `angular-cli.json`\r\n1. Instead, add a reference to `myStyles.scss` in `src/styles.scss`:\r\n    ```\r\n    @import '../externalStyles/myStyles.scss';\r\n    ```\r\n1. **Now Webpack can no longer resolve `./cat.png`. Therefore, the app has no background images.**\r\n\r\n\r\n### The log given by the failure\r\n```\r\nERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss\r\nModule not found: Error: Can't resolve './cat.png' in 'C:\\temp\\scssNg2Cli\\src'\r\n @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:143-163\r\n @ ./src/styles.scss\r\n @ multi styles\r\n```\r\n\r\n### Mention any other details that might be useful.\r\nIn practice, this error is critical because it prevents importing Kendo UI's SCSS file.\r\n\r\nAttached you find the project showing the error.\r\n[scssNg2Cli.zip](https://github.com/angular/angular-cli/files/566256/scssNg2Cli.zip)"}}
{"actor":{"display_login":"rstropek"}}