Webpack Academy #BONUS: Use webpack with Typescript, Vuejs & Sass
Tags: javascript, webpack, typescript, vue
Published: 2021-10-14 12:32:08

A little bonus for people that follows my webpack academy course!

I will show you how to add **typescript** with **vuejs2** and **Sass**!

I will divide this article into 3 parts! You can only follow the first if you need to add only typescript into your project!

## Add typescript

For adding typescript we will need to add a loader and install some dependencies!

We will install `ts-loader` that will handling **.ts** file!

We need to add `tsconfig.json` (*ts-loader will use it for transpiling ts file into js file*).

After this we will remove all file in our `src/` in order to add **index.ts** (expect html file).

We need to use **ts-loader** in our webpack config!

```javascript
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
        }]
    },
```

### Alias typescript & webpack

If you use alias in webpack, you need to do the same alias for tsconfig file!

webpack.config

```javascript
    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src/"),
        }
    },
```

tsconfig.json

```json
"paths": {
   "@/*": ["./src/*"]
},
```

You can check all changes from [this](https://github.com/Code-Oz/webpack-academy/tree/560cd88f50c4e25cbd698cb9d61848926c543f15)

## Add vuejs 2

So now we will install vue2! We will add the `vue-loader`.

We will need to install another loader, if you remember during the first academy, I explain the goal of `style-loader` (it inject css into the DOM). We will need to replace it (we use it only in dev mode) with `vue-style-loader`! (it will do the same thing but for css in vue file!)

Ok so now we need to make **4 things!**

- the first is to indicate the alias of vue for webpack
- the second is linked to typescript
- the third is to add vue library as cdn
- the last is to configure vue & test!

### Alias vue (vue.esm.js)

In the webpack config

```javascript
'vue$': 'vue/dist/vue.esm.js',
```

### Adapt typescript with vue file

When typescript will handle vue file, it will have some trouble! Since it's not a ts file! But we need to transpile vue file into js file!

So when we declare our `ts-loader` we need to add this

```javascript
options: {
   // Tell to ts-loader: if you check .vue file extension, handle it like a ts file
   appendTsSuffixTo: [/\.vue$/]
}
```

We also need to create a file called `vue-shims.d.ts`, it will tell the TypeScript compiler that importing .vue files is OK. So you can import `vue` file without issue in `.ts`!

```javascript
declare module "*.vue" {
    import Vue from "vue"
    export default Vue
}
```

Also, we need to put this file in the `ts-config`

```json
    "files": [
        "./vue-shims.d.ts",
    ]
```

😅 We almost finish! Be brave 💪

### Import vue with cdn

Go to the part dedicated to cdn in my academy if you need to know how it's working but you need to add `vue cdn link` for dev mode and the same but `vue.min` in prod mode.

Don't forget to add `external property into the webpack.config`

### Config vuejs

We just need to configure vuejs config and we are done!

So first of all we need to create `index.ts` that will be the entry file of vue.

```typescript
import Vue from "vue"
import App from "./app/App.vue"

Vue.config.productionTip = false

export const app = new Vue({
    el: "#app",
    render: h => h(App),
})
```

I prefer to split `.vue` to `.ts`, my vue file will include my style and template, the typescript file will include all component logic.

app.vue

```vue
<template>
<div class="toto">
    Hello there
</div>
</template>

<script lang="ts" src="./App.ts"></script>
<style scoped>
    .toto {
        color: blue;
    }
</style>
```

app.ts
```typescript
import Vue from "vue"

export default Vue.extend({})
```

The last thing to do is to go to `html file` and create the `div` that will be used by vuejs (vue will use this div to inject its components).

As mentioned by the entry file, the `id` is `app`. So we just need to inject it into our `html`!

```html
<div id="app"></div>
```

You can check all changes from [this](https://github.com/Code-Oz/webpack-academy/tree/5ca91b0dbf7d9613aa861ec180cb69a98263911e)

## SASS

You can skip vuejs part if you are only interested by SASS with webpack!

Let's add `sass-loader` to our project, we need to use it before handling css! Since Sass transpilers file `.scss` into `.css`!

We also need to change our regex for handling `.scss` file

`test: /\.(sa|sc|c)ss$/,`

### Alias for style

I like to use alias for style files!

So we can go to it, but we need to add it to webpack config and typescript config!

After this, we can create our first `.sass` file.

```sass
$main-colors: #6096BA;
$hover: #45718D;
$active: #385A71;
$grey: #677681;
$light: #B7D0E1;
$black: #233947;
```

And use it to `.vue`

```vue
<style lang="scss" scoped>
    @import "~style/import.scss";
    div {
        background: $grey;
    }
</style>
```

Note: We also need to install `sass` packages!

I hope you like this **BIG** bonus!

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!