How do I get Angular 4 @import styles in a component to work?

Question

How do I get Angular 4 @import styles in a component to work?

For my generic Angular 4.0.2 app I have a component (BlogComponent) with:

@Component({
    templateUrl: 'blog.component.html',
    styleUrls: ['blog.component.scss']
})

In my stylesheet, I have:

@import '../../styles';

File structure:

/src
    styles.scss
    /app
        /blog
            blog.component.scss

i.e. main stylesheet in root and component stylesheet in app / blog

When I run npm start

I get:

Error: Compilation failed. Resource file not found: C:/Users/robba/Angular4/robbailey3/src/styles
    at ModuleResolutionHostAdapter.readResource (C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler-cli\src\compiler_host.js:370:19)
    at CompilerHost.loadResource (C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler-cli\src\compiler_host.js:243:85)
    at Object.get (C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler\bundles\compiler.umd.js:24640:107)
    at DirectiveNormalizer._fetch (C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler\bundles\compiler.umd.js:13297:45)
    at C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler\bundles\compiler.umd.js:13426:53
    at Array.map (native)
    at DirectiveNormalizer._loadMissingExternalStylesheets (C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler\bundles\compiler.umd.js:13426:14)
    at C:\Users\robba\Angular4\robbailey3\node_modules\@angular\compiler\bundles\compiler.umd.js:13429:26
    at process._tickCallback (internal/process/next_tick.js:109:7)
    at Module.runMain (module.js:607:11)
Compilation failed

However, the import statement works great when I use ng serve

.

How do I make the operator @import

work for npm start

or npm build

?

+3

angular npm sass

Rob bailey May 17 '17 at 6:34

source to share

No one has answered this question yet

Check out similar questions:

4

Error: An error found that symbol values are statically recognized. Only initialized variables and constants can be specified

2

Failed to compile i18n with Sass - resource file not found

1

Undefined Angular 2 import error with JsonpModule

0

Kendo Angular 2 Grid 0.12.0 Doesn't compile to AOT

0

PWA support in Angular throws node_modules/@angular/service-worker/service-worker.d.ts, found version 4, expected 3 errors

0

Angular 4: ng works well, but ng build --prod doesn't work

0

"Internal error: unknown identifier" when building an angular project with -aot

-1

Failed to start Angular4 app

-2

ERROR: metadata version mismatch

-7

File errors compiled in Angular 5

How do I get Angular 4 @import styles in a component to work?

More articles: