Блог

Я создаю библиотеку компонентов с использованием Vue и TailwindCSS. Когда я включил зависимость и загрузил компоненты в свое приложение, я заметил, что ни один из стилей не присутствовал.

Я вернулся к сборке и увидел , что файлы common , umd и umd.min были сгенерированы, но файл css не был.

Если я добавлю что-то вроде

 lt;stylegt; .foo {} lt;/stylegt;  

В один из моих файлов vue компонентов и запустите команду сборки, с помощью которой я вижу /dist/libname.css , что файл сгенерирован .foo{} внутри.

Есть ли что-нибудь, что мне нужно сделать, чтобы очистить css для включения в сборку?

Я на самом деле не мог найти ответа, поэтому я придумал решение, которое, возможно, сильно усложняет его.

У меня в файле package.json есть следующие сценарии;

 "build": "npm run build-vue amp;amp; npm run tailwind amp;amp; 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) =gt; {  let contents = "/** n"    "* Some Intro Title n"    "* Version: v"   version   "n"    "* Author: John Doe n"    "*/nn";   if (err) {  console.error(err);  return;  }  contents  = buff.toString()   "n";   fs.readFile("./dist/"   packageName   ".css", (err, buff) =gt; {  if (! err) contents  = buff.toString();  fs.writeFile("./dist/"   packageName   ".prod.css", contents, err =gt; {  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