Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

This is not a compiled file; it's raw ES6 and we know it because import is not defined in

regular JavaScript. That's why we need Webpack to compile this for us.

On the other hand, consider that we write the following:

<style lang="sass">

@import '~bulma';

</style>

With the tilde sign (~), we tell Webpack to resolve the style like it was a module and so,

what we are really importing is the file referred to by the main in the package.json of the

bulma package, which, if we check, looks as follows:

{

"name": "bulma",

"version": "0.3.1",

"main": "bulma.sass",

}

Since we are importing a SASS with the SASS syntax, we need to specify in the Vue

component that we are using lang="sass".

Developing with continuous feedback with hot reloading

Hot reloading is a really useful technology that lets you develop while looking at the results

in the browser, without even refreshing the page. It's a very tight loop and can really speed
up your development process. In the official Webpack template, hot reloading is installed

by default. In this recipe, you will learn how to install it yourself.

Getting ready

Before attempting this recipe, you should have at least a vague idea of how Webpack

works; the Organizing your dependencies with Webpack recipe in this chapter will have you
covered.