如何从 Tailwind 拆分生成的 CSS 代码? [英] How to split generated CSS code form Tailwind?
问题描述
我正在寻找一种解决方案，将 Tailwind PostCSS 插件(结合 purgecss 插件)生成的大 CSS 文件拆分为多个 CSS 文件(每个消费者 JS 文件一个 CSS 文件).可以通过查看 JS 文件中使用的选择器(即 p-1 和 m-1 等类名)来检测 JS 文件使用的 CSS 规则.
知道如何实现这一点或类似的东西吗?
我部分解决了这个问题.
首先，从 postcss.config.js 中删除所有的顺风代码.然后在包含文件的文件夹中创建tailwind.config.js，即使用tailwind 类.
这是我的基本演示示例.
文件夹中有两个文件:
App.vuetailwind.config.jsApp.vue:
<脚本>导出默认{数据() {返回 {消息:我来自 vue 文件"};}};<style lang="scss">@import "scss/dynamic/tailwind.scss";#应用程序 {颜色:$红色；}</风格>
scss/dynamic/tailwind.scss(可以轻松访问任何文件中的 tailwind):
@tailwind 组件；@tailwind 实用程序；tailwind.config.js:
module.exports = {清除:{模式:全部"，内容:[__dirname + "/App.vue"]},主题: {}，变体:{}，插件:[]};webpack.config.js(仅 css 部分):
<代码>...{测试:/\.(sa|sc|c)ss$/,用: [MiniCssExtractPlugin.loader,"css加载器",{loader: "postcss-loader",选项: {插件:env =>{const dir = env._module.context;const config = dir + "/tailwind.config.js";返回 fs.existsSync(config)?[需要(tailwindcss")(配置)]: [];}}},{装载机:sass-装载机"，选项: {数据:`@import "scss/static/abstracts";`}}]}...最后我有一个 css 文件，它是动态加载的，看起来像这样:
.flex{display:flex}.flex-col{flex-direction:column}.flex-no-wrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.content-center{align-content:center}#app{color:red}我仍然存在的问题:
- 如果多个文件(在一个页面上动态加载)使用相同的类，则重复 css 代码
- 我需要有多个配置文件 + 每个文件夹只有一个配置文件.
- 主
app.scss的配置文件在.blade.php文件中看不到类，可能与文件路径有关:
const path = require("path");模块.出口 = {清除:[path.resolve("../../../../views/base.blade.php"),path.resolve("../../../../views/page/home.blade.php")],主题: {}，变体:{}，插件:[]};I am looking for a solution to split the big CSS file generated by Tailwind PostCSS plugin (combined with purgecss plugin) into multiple CSS files (one CSS file per consumer JS file). Consumed CSS rules by JS files can be detected by looking into used selectors in JS files (i.e. class names such as p-1 and m-1).
Any idea how to achieve this or something similar?
I was partially able to solve this.
First of all, remove all tailwind code from postcss.config.js. Then create tailwind.config.js in the folder with the file, that is using tailwind classes.
Here's my basic demo example.
In the folder there are two files:
App.vue
tailwind.config.js
App.vue:
<template>
<div
id="app"
class="flex flex-col flex-no-wrap items-center content-center justify-center"
>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: "I'm from vue file"
};
}
};
</script>
<style lang="scss">
@import "scss/dynamic/tailwind.scss";
#app {
color: $red;
}
</style>
scss/dynamic/tailwind.scss (to have easy acces to tailwind in any file):
@tailwind components;
@tailwind utilities;
tailwind.config.js:
module.exports = {
purge: {
mode: "all",
content: [__dirname + "/App.vue"]
},
theme: {},
variants: {},
plugins: []
};
webpack.config.js (only css part):
...
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
plugins: env => {
const dir = env._module.context;
const config = dir + "/tailwind.config.js";
return fs.existsSync(config)
? [require("tailwindcss")(config)]
: [];
}
}
},
{
loader: "sass-loader",
options: {
data: `@import "scss/static/abstracts";`
}
}
]
}
...
In the end I have a css file, that is loaded dynamically, and looks like this:
.flex{display:flex}.flex-col{flex-direction:column}.flex-no-wrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.content-center{align-content:center}#app{color:red}
Problems, that I still have:
- If multiple files (that are loaded dynamically on one page) use same classes, css code is repeated
- I need to have multiple config files + only one config file per folder.
- The config file for main
app.scssdoesn't see classes in.blade.phpfiles, maybe it has something to do with the files path:
const path = require("path");
module.exports = {
purge: [
path.resolve("../../../../views/base.blade.php"),
path.resolve("../../../../views/page/home.blade.php")
],
theme: {},
variants: {},
plugins: []
};
这篇关于如何从 Tailwind 拆分生成的 CSS 代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
