vite处理css

CSS 预处理器

vite内置支持less、sass、stylus，无需安装特定插件，

如果使用的是单文件组件，可以通过 <style lang="sass">（或其他预处理器）自动开启。

CSS Modules

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象。

CSS后处理

安装postcss autoprefixer

然后配置postcss.config.js或在vite.config中配置

// vite.config.ts 增加如下的配置
import autoprefixer from 'autoprefixer';
export default {
  css: {
    // 进行 PostCSS 配置
    postcss: {
      plugins: [
        autoprefixer({
          // 指定目标浏览器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  }
}

# 或配置postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer({
      overrideBrowserslist: [
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
    })
  ]
}

CSS打包

默认情况下，dev模式css代码会通过style标签插入，生产模式css代码会单独打包成一个文件。

config配置示例

export default defineConfig({
  css: {
    // 进行CSS Modules配置
    modules: {
      // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
      // 其中，name 表示当前文件名，local 表示类名
      generateScopedName: "[name]__[local]___[hash:base64:5]"    
    },
    // 进行 CSS预处理配置
    preprocessorOptions: {
      scss: {
        // additionalData 的内容会在每个 scss 文件的开头自动注入
        additionalData: `@import "${variablePath}";`
      }    
    },
    // 进行 PostCSS 配置
    postcss: {
      plugins: [
        autoprefixer({
          // 指定目标浏览器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  },
  ......
});