Vite对css的支持是比较全面的

Vite内置了postcss的支持

1. css module的支持

css module是一套样式的模块化方案, 他可以解决命名冲突和全局样式污染的问题, 同时也提供了css的模块化;

但是css module不是浏览器原生支持的方案, 必须经过编译工具的处理才能达到以上的能力.

Vite对css module的支持

// 命名到配置文件的css.modules下
modules: {
    globalModulePaths: ['style/demo1.module.css']
},

modules接口如下:

interface CSSModulesOptions {
  // 作用域行为, 默认local, 设置global则为全局话,没有作用域
  scopeBehaviour?: 'global' | 'local'
  // 设置不进行处理的路径
  globalModulePaths?: RegExp[]
  // 设置css生成的格式
  generateScopedName?:
    | string
    | ((name: string, filename: string, css: string) => string)
  // 生成hash的规则
  hashPrefix?: string
  /**
   * 默认：null
   */
   // 命名的规则
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | null
}

2. postcss的支持

postcss被Vite内置了, 设置于css.postcss上

postcss被用作了后置处理器, 由其他css预处理器拿到结果, 最终postcss再进行进一步的处理(当然postcss也具备css预处理器的功能)

postcss功能很强大, 其作用类似于js的babel, 可以做降级兼容, 也可以做代码前缀补全等强大的功能

postcssPresetEnv是一套postcss的预制集合, 包含了前缀补全等内容

export default defineConfig({
    css: {
        // ...
        postcss: {
            plugins : [postcssPresetEnv()]
        },
    }
});

3. preprocessorOptions的支持

Vite对css预处理器的支持都将配置到此对象下, 包含less,scss,styl等

export default defineConfig({
    css: {
        // ...
        // css的预处理器
        preprocessorOptions: {
            less: {
                math: 'parens-division',
            }
        },
    }
});

4. sourcemap的支持

export default defineConfig({
    css: {
        devSourcemap: true,
    }
});