npm run watch ignoring styles in *.vue components.

I don't know if I'm missing something here, but when I run npm run watch, Mix compiles everything as expected, but then if I change something in my app.scss, it seems like the SCSS styles I've written in my Vue components gets ignored. This doesn't seem to happen if I make changes to the Vue components themselves. Only when I change my app.scss stylesheet.

warrickbayman

8 years ago

Level 3

So, I noticed something on a project I've been working on that is experiencing this. Like before, if I edit the stylesheet inside a .vue file, it builds correctly without any problems, but when I make a change to the app.scss file, the build still completes, but I get this error:

app.js:46918 Uncaught TypeError: utils.isStandardBrowserEnv is not a function at Object.chars (app.js:46918) at __webpack_require__ (app.js:20) at Object.<anonymous> (app.js:15381) at __webpack_require__ (app.js:20) at getDefaultAdapter (app.js:15249) at Object.<anonymous> (app.js:15258) at Object.<anonymous> (app.js:15323) at __webpack_require__ (app.js:20) at Object.module.exports (app.js:46433) at __webpack_require__ (app.js:20)

And there is a difference in the size of the compiled JS file:

2009724 Sep 5 23:17 app.js

2017352 Sep 5 23:18 app.js

So something is getting left out. I added .extract(['axios', 'vue']) to webpack.mix.js which now gives me a different error:

vendor.js:1665 [Vue warn]: Error in beforeCreate hook: "TypeError: __webpack_require__(...) is not a function"

and

vendor.js:1752 TypeError: __webpack_require__(...) is not a function at Object.defineProperty.value (app.js:54772) at __webpack_require__ (manifest.js:55) at Object.<anonymous> (app.js:54749) at __webpack_require__ (manifest.js:55) at VueComponent.injectStyle (app.js:54705) at callHook (vendor.js:3851) at VueComponent.Vue._init (vendor.js:5408) at new VueComponent (vendor.js:5582) at createComponentInstanceForVnode (vendor.js:4864) at init (vendor.js:4681)