|
我的解决方案。不仅仅可以tailwindcss其他的也可以了
"devDependencies": {
"autoprefixer": "^10.2.4",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^6.0.3",
"laravel-mix": "^6.0.11",
"postcss": "^8.2.10",
"postcss-import": "^14.0.0",
"postcss-nested": "^5.0.3",
"postcss-nested-ancestors": "^2.0.0",
"resolve-url-loader": "^3.1.2",
"tailwindcss": "^2.1.2"
}
PurgeCSS 可以针对指定网页仅保留使用到的样式。实际上如果你使用 tailwindcss 的自定义配置,是可以配合 PurgeCSS 使用的。
我自己写了一个预处理工具,Tailwind CSS 本质不就是一堆缩写和 CSS 语法糖嘛,也不是很难。我个人不适合用 PurgeCSS 之类的自动裁切工具,因为一些 TailwindCSS 样式,是 JS 动态添加到 class 上的。原先静态 dom 里没有,PurgeCSS 就没办法正确提取所需要的所有样式,只能自己写了。
@3dwelcome purgecss 是可以处理 js 里面的 class 的,另外也可以自己写 extractorhttps://purgecss.com/extractors.html#default-extractor
@Mutoo 我说的 js 里的 class,不单是“bg-red-500”字符串,而是拼接后的字符串。比如 var styleval = "bg"+"-" + color + "-" + value;如果这都能猜到,那工具就神了。
@3dwelcome 那你大可直接把 bg-*-* 加到白名单里呀,何必猜呢。
@Mutoo @3dwelcome 谢谢,现在看来我还是要放弃它了。 用 Webpack 也不能实现我所需要的。 太难了 QAQ
https://www.npmjs.com/package/sass不喜欢 sass 语法当个 css 用也行,可以打包成一个文件
|
|