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

?