Historical review:

  • [VUE series] A wave of activity lucky draw
  • [Vue series] First experience with TypeScript
  • [VUE series] Image clipping plug-in VUe-Cropper, source code interpretation
  • [VUE series] From the interpretation of publish and subscribe mode to the implementation of vUE responsive principle (including VUe3.0)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (I)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (2)
  • Vue series: Vue-DevTools you don’t know
  • Vue series vUE – Router source code analysis
  • [VUE series] In-depth understanding of VUex
  • 【 VUE series 】 VUE and EChats combine spring, vUE plug-in Vechart
  • Vue series ESLint is configured for the vue2. X project
  • [VUE series] Vue2. X project configures Mocha unit test
  • [VUE series] Two pictures, figure out the diff algorithm, really sweet ah!
  • [VUE series] Lazy loading of vue-Router routes occurs when element-UI is introduced on demand
  • Vue series the correct way to encapsulate common popover components
  • [VUE series] Develop components, package into VUE plug-ins, write documents, configure GH-Pages branch demo, release NPM package one stream

background

The demo on our group component library documentation shows the vUE server side rendering implementation adopted. Group partners through Vue SSR official guide, can now render. But now there is a problem, does not meet our component demo writing environment, expectations? Support for sASS, typescript environments. This becomes a difficult point. Just now I am in the stage busy leisure period, hurriedly research.

Basic Environment:

  • Node: v12.19.0
  • @ vue/cli: 4.5.9
  • Webpack: 4.0.0

Implementation support sASS preprocessor

Sass-loader and Node-sASS are required to support SASS preprocessors.

See this two NPM package, some friends are stupid confused?

Node-sass:

Node-sass is a library that binds Node.js to LibSass. It allows users to compile.scSS files locally to CSS with incredible speed, and compile them automatically through connected middleware.

In short, sass files need to be compiled using sass-loader, and sass-loader depends on Node-sass, so node-sass needs to be installed.

When searching for information, I see this configuration:

Example:import SASS and SCSS #28

// webpack.base.config.js 
{
          test: /\.scss$/,
          use: [
              // fallback to style-loader in developmentprocess.env.NODE_ENV ! = ='production' ? 'style-loader' : MiniCssExtractPlugin.loader,
              "css-loader"."sass-loader"] {},test: /\.sass$/,
        use: [
            // fallback to style-loader in developmentprocess.env.NODE_ENV ! = ='production' ? 'style-loader' : MiniCssExtractPlugin.loader,
            "css-loader"."sass-loader"]},Copy the code

Example:How do I add SCSS support #13

Checked several VUE SSR library sASS implementation, and also tried several solutions. It didn’t solve my problem. In the process of exploration, I noticed that style-loader and vue-style-loader are used very messy by many people. In the CSS management section of Vue SSR guide, it is clearly stated that:

The VUe-style-loader is used to dynamically inject CSS in the VUE with labels during server rendering.

Style-loader is used with vue normal projects, not vue server rendering.

Eventually the reality

NPM install:

npm i node-sass@4.53. sass-loader@6.06.
Copy the code

The NPM package in this article identifies the version I’m using

Webpack. Base. Conf. Js configuration:

resolve: {
    extensions: ['.js'.'.vue'.'.scss'.'.sass'],},module: {
    rules: [{test: /\.(css|scss|sass)$/,
        use: ['vue-style-loader'.'css-loader'."sass-loader"],},]}Copy the code

Support typescript

Typescript is a bit more cumbersome, if not difficult, but involves a lot of configuration points and changes to files. Let’s get started.

Typescript related NPM installations

npm i ts-loader@8.018. typescript@3.93. 
Copy the code

Vue class related NPM installation

npm i vue-class-component@ 7.2.5vue-property-decorator@ 9.0.0vuex@ 3.5.1 track ofvuex-class@ 0.3.2Copy the code

Create tsconfig. Json

The specific configuration is very simple, you can check the official website

webpack.*.conf.js

Webpack. Base. Conf. Js configuration:

resolve: {
    extensions: ['.js'.'.vue'.'.scss'.'.sass'.'.ts'],},module: {
    rules: [{test: /\.ts$/,
        loader: 'ts-loader'.options: {
          appendTsSuffixTo: [/\.vue$/],}},]}Copy the code

Entry Configuration

Set entry in webpack.base.confi.js, webpack.client.confi.js, and webpack.server.confi.js to entry-client.ts or entry-server.ts

Change file suffix

  • entry-client.js -> entry-client.ts
  • entry-server.js -> entry-server.ts
  • app.js -> app.ts
  • server.js -> server.js

Note that import {createApp} from ‘./app ‘is referenced in entry-client.ts; The default app is app.vue, we need to specify app.ts. Entry – server. Ts in the same way.

The new filesfc.d.ts

declare module "*.vue" {
    import Vue from "vue";

    export default Vue;
}
Copy the code

Component transformation

First, app.vue, followed by the rest of the pages and components.

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class App extends Vue {
  mounted() {
    console.log('App mounted'); }}</script>
<style>
</style>
Copy the code

Restart the project

At this point, the configuration is complete. Project restart NPM run dev, ✌️, our vue server rendering support sass, typescript. I hope I can help you with your daily problems.