Vite文档

vite.config.js

  import postcssPresetEnv from 'postcss-preset-env'
  export default defineConfig({
    resolve:{
      alias:{
        "@": path.resolve(__dirname,"./a.js")
      }
    }
    optimizeDeps:{
      excludes:[], //将指定数组中的依赖不进行预构建
    },
    envPrefix: "ENV_", //环境变量前缀
    css:{ //对css的行为进行配置
      // modules配置最终会传给postcss modules
      modules:{ //是对css模块化的默认行为进行覆盖
        localConvention: "camelCase", // 修改生成的配置对象的Key的展示形式（驼峰还是中划线形式）
        scopeBehaviour: "local", // 配置当前模块化行为是模块化还是全局化（有hash就是开启模块化的一个标志，因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖）
        generateScopedName: "[name]_[local]_[hash:5]", // 生成类名的规则
        generateScopedName: (name,filename,css) => {
          // name -> 代表的是你此刻css文件中的类名
          // filename -> 是你当前css文件的绝对路径
          // css -> 给的就是你当前样式
          // 配置成函数以后，返回值就决定了他最终的显示类型
          return `${name}_${Math.Random().toString()}`
        },
        hashPrefix: "hello", // 生成hash会根据你的类型去进行生成，如果你想你的hash更加独特一些，可以配置hashPrefix
        globalModulePaths:["./component.css"] // 代表你不想参与到CSS模块化的路径
      },
      preprocessOptions:{ //key + config key表示预处理器的名字
        less:{ //整个的配置对象都会最终给到less的执行参数（全局参数）中去
          math: "always",
          globalVars:{ //全局变量
            mainColor: "red"
          }
        },
        sass:{

        }
      },
      devSourceMap:true, // 开启css文件的sourceMap(文件索引)
      postcss:{
        plugins:[postcssPresetEnv({
          importForm: path.resolve(__dirname,"./variable.css") // 就好比你现在让postcss去知道，有一些全局变量他需要优先导入
        })]
      }
    },
  })