Table of Contents
URL: https://www.progressiverobot.com/vuejs-vue-custom-webpack-loaders/
One of the most unique features of Vue is the built-in support for other languages and pre-processors in <^>.vue<^> single-file-components. This allows you to use whatever pre-processor you'd like so long as it has an available webpack loader. Often the defaults are enough, but here we'll show you how to add a new language (sort of) to Vue, and configure other ones.
Configuration
This assumes you've already got a basic Webpack config ready. (If not, use vue-cli's <^>webpack-simple<^> template.)
Once you've got a basic build ready, open up your <^>webpack.config.js<^> or similar, and look for the <^>vue-loader<^> options.
[label webpack.config.js]
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
}
},
...
Now, for a given block in your template, Vue will attempt to find the matching loader for the language. ie. <^>SASS<^> becomes <^>sass-loader<^> and <^>LESS<^> -> <^>less-loader<^>. That's all well and good, but often people want to use <^>SCSS<^>. And there's no such thing as <^>scss-loader<^>.
Thankfully, <^>vue-loader<^> allows you to override the loader used for any language, and even add new languages.
We can add in support for <^>SCSS<^> using:
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: {
loader: 'sass-loader'
}
}
}
},
...
And use it:
<template>
...
</template>
<style lang="scss">
.i {
&.can {
&.use {
&.scss {
color: red;
}
}
}
}
</style>
If we want two separate configurations of the same loader, we can do that too. Let's create a "new language" that is really just another configuration of <^>scss-loader<^>.
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: {
loader: 'sass-loader'
},
newscss: {
loader: 'sass-loader',
options: {
includePaths: ['../../../somewhere/far/far/away']
}
}
}
}
},
...
And use it:
<template>
...
</template>
<style lang="newscss">
@import 'starwars-styles';
.i {
&.can {
&.use {
&.scss {
color: $font-color;
}
}
}
}
</style>
This pattern can be used with almost any other webpack loader. The only requirements are that loaders for scripts output valid <^>JavaScript<^>, loaders for styles output valid <^>CSS<^>, and loaders for HTML output valid HTML partials and handle vue-style attributes correctly. As a result, it's trivial to use almost any pre-processor in Vue. Enjoy!
