Vite+Vue3 project globally introduces scss files

Foreword

Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world! It is widely used in the daily project development process. Today I will mainly talk about how to globally introduce scss files in Vite + Vue3 projects and introduce different configurations of mixed mixin files. By the way, let’s talk about the introduction methods in Vue2 for a simple comparison.

1. Installation and use

1.1 Installation

Vite has built-in the loader of the sass preprocessor. We no longer need to download and configure a bunch of related loaders like in the webpack project. We only need to download the sass dependency and use it directly in the project:

# npm mode
npm install -D sass

# yarn mode
yarn add -D sass

# pnpm mode
pnpm install sass

1.2 scss global file writing

1.2.1 Overview

As shown below, create a styles directory under the src directory and create three scss files in the directory:

• ? reset.scss global element style reset file is mainly used to clear the default style of HTML elements. Just go to a big manufacturer’s page and copy it /**
*,
*:after,
*:before {
box-sizing: border-box;

  outline: none;
  }

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  sample,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldsets,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  foot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
  font: inherit;
  font-size: 100%;

  margin: 0;
  padding: 0;

  vertical-align: baseline;

  border: 0;
  }

  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
  display: block;
  }

  body {
  line-height: 1;
  }

  ol,
  ul {
  list-style: none;
  }

  blockquote,
  q {
  quotes: none;
  &:before,
  & amp;:after {
  content: '';
  content: none;
  }
  }

  sub,
  sup {
  font-size: 75%;
  line-height: 0;

  position: relative;

  vertical-align: baseline;
  }
  sup {
  top: -.5em;
  }
  sub {
  bottom: -.25em;
  }

  table {
  border-spacing: 0;
  border-collapse: collapse;
  }

  input,
  textarea,
  button {
  font-family: inhert;
  font-size: inherit;

  color: inherit;
  }

  select {
  text-indent: .01px;
  text-overflow: '';

  border: 0;
  border-radius: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
  }
  select::-ms-expand {
  display: none;
  }

  code,
pre {
font-family: monospace, monospace;
font-size: 1em;
}

• ? global.scss global style file introduces the reset.scss file, and adds some globally usable atomic classes according to the project conditions @import url("./reset.scss");

  // margin
  .m-b-30 {
  margin-bottom: 30px;
  }

  .m-l-5 {
  margin-left: 5px;
  }

  // font
.font600 {
font-weight: 600;
}

• ? mixin.scss is a global mixin style file that integrates multiple attributes that are often used in components, similar to the atomic class // Fixed width and centering
@mixin mo {
width: 1280px;
margin: 0 auto;
}

  // Center the elastic items of the flexible box up and down
  @mixin flex {
  display: flex;
  align-items: center;
  }

  // Level and region styles
  @mixin level-and-area {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  color: gray;

  dd {
  margin-right: 20px;
  margin-bottom: 16px;
  cursor: pointer;

  &:hover,
  & amp;.active {
  color: #4993f2;
  }
  }
  }

  //Single line text overflow display...
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

1.3 Global introduction and configuration

Although the above three are all scss files, because mixin.scss is a mixed file, it is different from the other two scss files when introduced in the Vite project.

• ? Ordinary scss style files can be imported globally by directly using import in the main.ts file.

import { createApp } from 'vue'
import App from '@/App.vue'

//Introduce global style files
import '@/styles/global.scss

const app = createApp(App)
app.mount('#app')

Here, the reset.scss file has been introduced in global.scss.

• ? The mixin.scss file is imported. If the mixin.scss file is introduced in main.ts as above, the introduction will fail and the program will report an error.

• That is to say, mixing cannot be introduced directly in main.ts. It needs to be configured in vite.config.ts as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  
  css: {
    preprocessorOptions: {
    // Configure the global import of the mixin.scss mix file here
      scss: {
        additionalData: `@import "@/styles/mixin.scss";`
      }
    }
  }
})

1.4 Use within components

Through the above configuration, you can use the declared atomic class and mixin in any component of the current project!

<script setup lang='ts'>
import { ref } from "vue";

const levels = ref([
  { level: "all" },
  {level: "Level 3A" },
  {level: "Level Three" },
  { level: "Second Class A" },
  { level: "Second Class B" },
  { level: "Level 1" }
]);

const cutIdx = ref(0);
</script>
<template>
  <dl class="level">
    <dt class="m-b-30">Level:</dt>
    <dd
      v-for="(item,index) in levels"
      :key="index"
      :class="index === cutIdx ? 'active' : ''"
    >{<!-- -->{ item.level }}</dd>
  </dl>
</template>
<style scoped lang='scss'>
.level {
  @include level-and-area;
}
</style>

vue2 project introduces sass

1. 1. Download and install a series of dependencies. First, webpack needs to download a lot of things: node-sass, sass-loader, style-loader, sass-resources-loadernpm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install sass-resources-loader --save-dev

2. 2. Configure vue.config.js Configure the sass-resources-loader entry file in vue.config.js const {
defineConfig
} = require('@vue/cli-service');

   module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: { //Proxy configuration
//...
},
chainWebpack: config => {
// sass-resources-loader public style file configuration, variables can be used globally
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
//Write the scss file path that defines the basic style
resources: [
'./src/assets/styles/common.scss'
]
})
.end()
})
},
});

3. 3. Define the scss style file src/styles/global.scss file definition variable code // define style variables
$html-root-font-size:14px
$theme-color:gray

4. 4. Use within the component // Use within the component

Attachment: Ignore ts type detection

• ? Single line ignore @ts-ignore async mounted(){
let num:number = 10;
//@ts-ignore
let {arr,map}= await conf.fun();
}

• ? The code in the current script does not require ts verification @ts-nocheck

• ? Cancel ignoring the full text // @ts-check

Included in the collection #Vue

16

Previous article How does front-end redeployment notify users to refresh the web page?