anguler-cliでscssビルドエラーを解決する

angular-cliでアプリを作る

% ng new my-app --style=scss

起動する

% cd my-app 
% ng serve --open

ビルドに失敗する。

% ng serve --open
You are running version 6.5.0 of Node, which will not be supported in future
versions of the CLI. The official Node version that will be supported is 6.9 and greater.

To disable this warning use "ng set --global warnings.nodeDeprecation=false".** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 8/9 modules 1 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundle finished: /
Hash: 736257371267d73edf59                                                              
Time: 7329ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 171 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 6.45 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.59 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/vendor'
    at Error (native)
    at Object.fs.readdirSync (fs.js:951:18)
    at Object.getInstalledBinaries (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/extensions.js:124:13)
    at foundBinariesList (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object. (/Users/adam/development/angular/tutorial/my-app/node_modules/sass-loader/lib/loader.js:3:14)
 @ ./src/styles.scss 4:14-189
 @ multi ./src/styles.scss

ERROR in ./src/app/app.component.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/vendor'
    at Error (native)
    at Object.fs.readdirSync (fs.js:951:18)
    at Object.getInstalledBinaries (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/extensions.js:124:13)
    at foundBinariesList (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/Users/adam/development/angular/tutorial/my-app/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object. (/Users/adam/development/angular/tutorial/my-app/node_modules/sass-loader/lib/loader.js:3:14)
 @ ./src/app/app.component.ts 18:17-48
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

node-sassをインストールする

% npm install node-sass --save-dev

もう一度、起動する。

% ng serve --open
You are running version 6.5.0 of Node, which will not be supported in future
versions of the CLI. The official Node version that will be supported is 6.9 and greater.

To disable this warning use "ng set --global warnings.nodeDeprecation=false".** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 6/9 modules 3 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundle finished: /
Hash: 3a75be2f4a4fec742f94                                                              
Time: 7565ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 171 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.7 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

起動した！

adamrocker

2017/07/13

anguler-cliでscssビルドエラーを解決する