question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding `includePaths` in the `stylePreprocessorOptions` seems to have no effect

See original GitHub issue
  • bug report

Description

Adding includePaths in the stylePreprocessorOptions entry in angular-cli.json’s apps object seems to have no effect.

Versions.

@angular/cli: 1.0.0
node: 6.10.0
os: linux x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1
@angular/language-service: 4.0.1

Repro steps.

  • ng new new-project --style=scss
  • cd new-project
  • create new _variables.scss in src/styles
  • add the following to src/styles/_variables.scss:
$some-variable: #fff;
  • add the following to src/app/app.component.scss:
@import 'variables';

h1 {
  color: $some-variable;
}
  • add the following to .angular-cli.json’s apps property:
      "stylePreprocessorOptions": {
        "includePaths": [
          "styles"
        ]
      },
  • run ng serve

The error log

ERROR in ./src/app/app.component.scss
Module build failed: 
@import 'variables';
^
      File to import not found or unreadable: variables.
Parent style sheet: stdin
      in ~/PROJECTS/new-project/src/app/app.component.scss (line 1, column 1)
 @ ./src/app/app.component.ts 56:17-48
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Desired functionality

https://github.com/angular/angular-cli/blob/5b1668f9ba39175e0f57fe23df6672ec40c3b745/docs/documentation/stories/global-styles.md

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:16
  • Comments:21 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
MickLcommented, Jul 31, 2017

Oh! So even when setting includePaths we have to import the files anyway? So the only purpose for includePath is to write “variables” instead of “…/…/…/styles/variables” ?

4reactions
tomchinerycommented, May 5, 2017

I’m having this issue as well, heres my the relevant part in angular-cli.json:

  "stylePreprocessorOptions": {
    "includePaths": [
      "./src/Assets/Scss/bourbon/bourbon",
      "Assets/Scss/neat/"
    ]
  }```

Note: Not sure if it was a relative or full path so tried both. 
Read more comments on GitHub >

github_iconTop Results From Across the Web

stylePreprocessorOptions angular 8 - Stack Overflow
I found same bug when started new app with Angular 8. It says "Can't find stylesheet to import." even for properly declared imports....
Read more >
angular/angular-cli - Gitter
includePaths in my angular.json, but removing it made no difference. ... Data path "" should NOT have additional properties(stylePreprocessorOptions).
Read more >
SASS "includePaths" in angular.json is not recognized when ...
I have an Angular monorepo project. I've set projects.public.architect.build.options.stylePreprocessorOptions.includePaths to be ["projects/public/src/ ...
Read more >
Two simple configuration options for your Angular app to ease ...
Go into your tsconfig.json file. In the compilerOptions section add a paths setting. It will be an object which keys are path aliases...
Read more >
Angular Workspaces: Multi-Application Projects - OctoPerf
How to create an Angular 8 project with multiple applications and libraries? This guide uses the Kraken Load Testing IDE front as an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found