利用postcss样式兼容低版本浏览器

vite读取到main.js中引用到了index.css通过fs模块去读取index.css文件的内容直接创建一个style标签将index.css中的文件内容直接copy进style标签中将style标签插入到index.html的head中将该css文件中的内容直接替换为hs脚本(方便热更新或者css模块化)

创建一个index.css文件

./index.cssconsole.log(count);启动vite服务器

yarn

结尾的文件这是css开启模块化的标志。

将xxx.module.css里面所有的样式名称进行一定规则的替换增加hash字符串比如footer

替换为

_footer_123st}将替换后的内容塞进style标签里然后放入head标签中。

将原本的xxx.module.css内容全部抹除替换成对应js脚本。

将创建的映射对象在脚本中默认导出

分别创建

document.createElement(div);div.className

componentAcss.footer;document.body.appendChild(div)componentB

index.js

document.createElement(div);div.className

componentBcss.footer;document.body.appendChild(div)在main.js中全部引入

import

./src/componentB/index.js启动服务器之后发现css

使用less

console.log(count);启动vite服务器后报错

yarn

https://github.com/madyankin/postcss-modulesmodules:

local,

配置当前的css样式的行为是local模块化还是global全局化有hash就是开启模块化因为它可以保证不同的模块相同类名不重复。

//

generateScopedName:

[name]__[local]___[hash:base64:5],

更多配置

https://github.com/webpack/loader-utils#interpolatenamegenerateScopedName:(name,filename,css)

{//

修改生成的配置对象的展示形式驼峰/划线/中划线形式hashPrefix:

补充的hash前缀会参与到生成的类名中globalModulePaths:

导入了第三方样式时或某些不希望module.css模块化hash时,使用这个globalModulePaths填入css模块化的路径。

},preprocessorOptions:

{//

https://less.bootcss.com/usage/#lessjs-optionsmath:

always,globalVars:

配置当前的css样式的行为是local模块化还是global全局化有hash就是开启模块化因为它可以保证不同的模块相同类名不重复。

//

generateScopedName:

[name]__[local]___[hash:base64:5],

更多配置

https://github.com/webpack/loader-utils#interpolatenamelocalsConvention:

camelCase,

修改生成的配置对象的展示形式驼峰/下划线camelCaseOnly/中划线形式hashPrefix:

11,

{plugins:[postcssPresetEnv()]}}

.footer