Angular-cli: SCSS imports fail when serving from `src` directory

Created on 17 Aug 2017  路  2Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.


1.3.0

Repro steps.


1) Create a project: ng new cli-scss-imports --style=scss && cd cli-scss-imports
2) mkdir src/scss
3) Add src/scss/_variables.scss
4) Add an import inside src/app/app.component.scss for @import 'src/scss/variables';

Works: ng serve from cli-scss-imports
Fails: ng serve from cli-scss-imports/src

The log given by the failure.

ERROR in ./app/app.component.scss
Module build failed:
@import 'src/scss/variables';
^
      File to import not found or unreadable: src/scss/variables.
Parent style sheet: stdin
      in /Users/dominic/Sites/github/intellix/cli-scss-imports/src/app/app.component.scss (line 1, column 1)
Error:
@import 'src/scss/variables';
^
      File to import not found or unreadable: src/scss/variables.
Parent style sheet: stdin
      in /Users/dominic/Sites/github/intellix/cli-scss-imports/src/app/app.component.scss (line 1, column 1)
    at options.error (/Users/dominic/Sites/github/intellix/cli-scss-imports/node_modules/node-sass/lib/index.js:291:26)
 @ ./app/app.component.ts 18:17-48
 @ ./app/app.module.ts
 @ ./main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./main.ts

Desired functionality.


ng commands search upwards through directories for an .angular-cli.json and then work. If someone was to accidentally do this inside a directory, it's unable to resolve SCSS imports and the error is confusing when you forgot you were in another directory

Mention any other details that might be useful.

easy (hours) help wanted 2 (required) bufix

Most helpful comment

Some things which always worked:

"stylePreprocessorOptions": {
  "includePaths": [
    "scss"
  ]
},

and doing: @import 'variables';

or doing relative imports like: @import '../scss/variables';

All 2 comments

Some things which always worked:

"stylePreprocessorOptions": {
  "includePaths": [
    "scss"
  ]
},

and doing: @import 'variables';

or doing relative imports like: @import '../scss/variables';

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings