CSS样式管理

css 预处理器

这里我们选择的是sass/scss

npm install --save-dev sass

样式目录结构

variables.scss // 全局Sass变量
mixin.scss // 全局混入 mixin
common.scss // 全局公共样式
transition.scss // 全局过度动画样式
index.scss // 组织统一导出

常见的工作流是，全局样式都写在src/styles目录下，每个页面自己对应的样式都写在自己的.vue文件之中。

normalize.css

安装normalize.css，用来清除浏览器的默认样式，然后在index.scss中引入。

pnpm add normalize.css

// index.scss
@use 'normalize.css';

然后在main.ts中引入index.scss即可。

如果想在组件中使用全局css变量的话，需要在组件中单独引入全局变量的.scss文件。

css.preprocessorOptions

vite官方提供了指定传递给 CSS 预处理器的选项，所有预处理器选项还支持 additionalData 选项，可以用于为每个样式内容注入额外代码。只要将全局变量的.scss文件的路径作为 additionalData 的value就可以不用再在每一个组件中都去引入一次了，就相当于全局加载了scss变量的文件。

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    eslint({
      cache: false
    })
  ],
  resolve: {
    // 路径别名
    alias: [{ find: '@', replacement: pathResolve('src') }]
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/variables.scss" as *;'
      }
    }
  }
})