使用 vue build 和 tailwindcss 时不生成 CSS 文件

Posted 2023-02-23

【中文标题】使用 vue build 和 tailwindcss 时不生成 CSS 文件

【英文标题】：CSS file is not generated when using vue build and tailwindcss

【发布时间】：2022-01-03 13:56:11

【问题描述】：

我正在使用 Vue 和 TailwindCSS 构建一个组件库。当我拉入依赖项并将组件加载到我的应用程序时，我注意到不存在任何样式。

我返回构建，可以看到 common、umd 和 umd.min 文件已生成，但 css 文件未生成。

如果我添加类似的东西

<style>
.foo 
</style>

到我的一个组件 vue 文件并运行构建命令，我可以看到 /dist/libname.css 文件在里面生成了 .foo。

我需要做些什么才能将清除的 css 包含在构建中吗？

【问题讨论】：

你的 vue.config 文件有 css: extract: false ?

【参考方案1】：

我实际上找不到答案，所以我想出了一个可能过于复杂的解决方案。

我的 package.json 文件中有以下脚本；

"build": "npm run build-vue && npm run tailwind && node uibuild",
"build-vue": "vue-cli-service build --target lib --name mypackagename ./src/index.js",
"tailwind": "NODE_ENV=production tailwindcss build -o ./dist/mypackagename-base.css"

还有一个javascript文件；

const fs = require("fs");
const version = require('./package.json').version;
const packageName = 'mypackagename';

fs.readFile("./dist/" + packageName + "-base.css", (err, buff) => 
    let contents = "/** \n" +
        "* Some Intro Title \n" +
        "* Version: v" + version + "\n" +
        "* Author: John Doe \n" +
        "*/\n\n";

    if (err) 
        console.error(err);
        return;
    
    contents += buff.toString() + "\n";

    fs.readFile("./dist/" + packageName + ".css", (err, buff) => 
        if (! err) contents += buff.toString();
        fs.writeFile("./dist/" + packageName + ".prod.css", contents, err => 
            if (err) console.error(err);
            if (fs.existsSync("./dist/" + packageName + "-base.css")) fs.unlinkSync("./dist/" + packageName + "-base.css");
            if (fs.existsSync("./dist/" + packageName + ".css")) fs.unlinkSync("./dist/" + packageName + ".css");
        );

    );
);

然后简单地运行npm run build