Vue framework example throws import error and crashes on initial request

[krishnaxv]

Vue framework example throws import error on CLI and crashes on initial request to http://localhost:8080/.

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-36a0b25f!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: 
@import "@material/animation/functions";
^
      File to import not found or unreadable: @material/animation/functions
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-ripple/mdc-ripple.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-ripple/mdc-ripple.scss (line 17, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-36a0b25f!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:2-17:4 14:20-254

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-9f207556!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-snackbar/Snackbar.vue
Module build failed: 
@import "@material/animation/variables";
^
      File to import not found or unreadable: @material/animation/variables
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-button/mdc-button.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-button/mdc-button.scss (line 17, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-9f207556!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-snackbar/Snackbar.vue 4:14-265 13:2-17:4 14:20-271

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-13f4150f!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-checkbox/CheckboxLabel.vue
Module build failed: 
@import "@material/animation/functions";
^
      File to import not found or unreadable: @material/animation/functions
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-checkbox/mdc-checkbox.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-checkbox/mdc-checkbox.scss (line 17, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-13f4150f!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-checkbox/CheckboxLabel.vue 4:14-270 13:2-17:4 14:20-276

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-544dc9d6!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-checkbox/Checkbox.vue
Module build failed: 
@import "@material/animation/functions";
^
      File to import not found or unreadable: @material/animation/functions
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-checkbox/mdc-checkbox.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-checkbox/mdc-checkbox.scss (line 17, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-544dc9d6!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-checkbox/Checkbox.vue 4:14-265 13:2-17:4 14:20-271

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-63580c9e!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-icon-toggle/IconToggle.vue
Module build failed: 
@import "@material/animation/functions";
^
      File to import not found or unreadable: @material/animation/functions
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-icon-toggle/mdc-icon-toggle.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-icon-toggle/mdc-icon-toggle.scss (line 19, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-63580c9e!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-icon-toggle/IconToggle.vue 4:14-267 13:2-17:4 14:20-273

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-1c2acd22!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-form-field/FormField.vue
Module build failed: 
@import "@material/rtl/mixins";
^
      File to import not found or unreadable: @material/rtl/mixins
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-form-field/mdc-form-field.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-form-field/mdc-form-field.scss (line 17, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-1c2acd22!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-form-field/FormField.vue 4:14-266 13:2-17:4 14:20-272

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-1cafc76e!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-drawer/TemporaryDrawer.vue
Module build failed: 
@import "@material/rtl/mixins";
^
      File to import not found or unreadable: @material/rtl/mixins
Parent style sheet: /home/krishnaxv/Desktop/material-components-web/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss
      in /home/krishnaxv/Desktop/material-components-web/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss (line 17, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-1cafc76e!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/v-mdc-drawer/TemporaryDrawer.vue 4:14-272 13:2-17:4 14:20-278

OS: Ubuntu 14.04 LTS

Steps to reproduce bug:

1. Run npm start in material-components-web/framework-examples/vue/ directory
2. Go to URL http://localhost:8080/ on the browser
3. Check CLI and browser console on http://localhost:8080/

[traviskaufman]

Thanks for reporting!

[wzup]

Same error here #1048