vite项目中的css样式管理

1.vite原生对css的支持 vite

• @import 内联和变基
  • Vite 通过 postcss-import 预配置支持了 CSS @import 内联
  • 所有 CSS url() 引用，即使导入的文件在不同的目录中，也总是自动变基，以确保正确性
• PostCSS
  • 如果项目包含有效的 PostCSS 配置，它将会自动应用于所有已导入的 CSS
• CSS Modules
  • 任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象

2.scss的相关配置

• 安装

# .scss and .sass
npm add -D sass

• 样式目录结构

 src/styles
 ├── index.scss # 全局样式（在⼊⼝模块被加载⽣效）
 ├── mixin.scss # 公共的 mixin 混⼊（可以把重复的样式封装为 mixin 混⼊到复⽤的地⽅）
 ├── reset.scss # 重置基础样式
 ├── variables.scss # 公共样式变量
 └── index.scss # 组织统一导出

• 使用样式
  在mian.js中导入

import './styles/index.scss'

• 在全局使用scss变量 vite
  在vite.config.js中配置，preprocessorOptions,直接加载variables.scss文件

 css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  },