标签：hash name 模块化 配置 postcss Vite Config css

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去知道，有一些全局变量他需要优先导入
        })]
      }
    },
  })

标签：hash,name,模块化,配置,postcss,Vite,Config,css
来源： https://www.cnblogs.com/leeSeeN/p/16650899.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。