【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案

npm install normalize.css

import "normalize.css"

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
  padding: 0;
  margin: 0;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  vertical-align: top;
}

@import './reset.scss'; // 注意是先进行代码的重置、这个导入在前
@import './common.scss'; // 公共样式
@import './mixin.scss'; // 样式混入
@import './variable.scss'; // 全局变量

import './assets/css/index.scss' // 导入样式入口文件

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueDevTools()],
  resolve: {
    // resolve -> 解决一些路径问题
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) // 在打包时将 @ 映射到 ./src
    }
  },
  >>>>>>>>>>>>>>>> 引入
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 variable.scss 这样就可以在全局中使用 variable.scss 中预定义的变量了
        // 注意：给导入的路径最后加上 `;`
        additionalData: '@import "@/assets/css/variable.scss";'
      }
    }
  }
  <<<<<<<<<<<<<<<< 引入
})