Sass imports in Vue.js Single File Components

To make imports work in the <style> block of Vue.js single file components, add a resolve alias to your webpack config.

 resolve: {
  alias: {
    '@': path.resolve('src'),
  }
}

The default webpack config in vue-cli’s webpack template already includes this.

Once that’s in place, reference the sass file to be imported like this:

<style lang="scss">
@import "~@/sass/vars";
</style>

Via @corysimmons on GitHub

Pragma Prefixing the devtool option in Webpack

The Vue.js example webpack config prefixed the devtool option with a hashmark (”#”), I hadn’t seen that before. 

devtool: '#eval-source-map',

Apparently it enforces a pragma style. It’s documented in the old Webpack docs.

Prefixing @, # or #@ will enforce a pragma style. (Defaults to @ in webpack@1 and # in webpack@2; using # is recommended)

Webpack indentation

Sort of useless, but if you’re annoyed that Webpack’s output files have re-indented your exquisitely space-indented source files with a tab (no-mixed-spaces-and-tabs!), just set output.sourcePrefix to spaces in your webpack.config.js file.

The main reason I did this was to be able to review the output files in a text editor without triggering thousands of ESLint indentation errors.

I don’t get Webpack

I keep seeing mention of Webpack in various JavaScript discussions, but I just don’t get it. I don’t see where it fits in, where it starts and ends or what it really wants to be.

Most Webpack introductions I’ve read start by comparing it to Browserify, then mention how it’s rolls in Require.js style AMD modules  – as if that were a good thing. If Webpack were just a better Browserify, that’d be great, because Browserify is pretty great already.

But then things get weird. Webpack can (with a loader) process Sass files? It gathers image assets? What? It watches files too? But I’ve already got Gulp* doing all that and the workflow is really good. Can Webpack work with Gulp? Does it replace Gulp? Why so much redundancy?

Finally Webpack throws in a static web server. Well now just stop right there. BrowserSync is ten kinds of awesome and much more than just live-reloading pages; device synchronization, mirrored input, bandwidth throttling and DOM outlining are going to have to be pried away from me. 

* I know Gulp is supposed to be gulp, but proper nouns and English.