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

Viewed 625

For my Angular 4.0.2 Universal App I have a component (BlogComponent) with:

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

Within the 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 fine when I use ng serve.

How do I get the @import statement to work for npm start or npm build?

0 Answers
Related