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

HelloWorldZ

发布于 2024-03-20 19:11:49

840

发布于 2024-03-20 19:11:49

文章被收录于专栏：前端开发前端开发

前面完成了项目结构的划分后，接着进行项目的 CSS 样式的重置

这里将包含两部分的重置：

normalize.css 样式重置库

在项目中安装依赖：

npm install normalize.css

在 main.ts 中导入，使得该样式库生效

import "normalize.css"

index.scss 样式出口

index.scss 文件作为文件导出口
common.scss 放置一些公共样式
reset.scss 放置一些重置样式
mixin.scss 一些样式混入
variable.scss 全局变量文件

reset.scss

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;
}

index.scss

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

最后在 main.ts 中导入

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

项目引入SCSS

安装 scss

vue3 不需要再使用 node-sass

npm i sass sass-loader --save-dev # 安装至 开发依赖 即可

在 vite.config.js 中配置 scss 的全局变量

scss变量最好不要到单独的 .vue 文件里去使用，因此将 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";'
      }
    }
  }
  <<<<<<<<<<<<<<<< 引入
})

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript