Question

这是我所拥有的：

一个VUE ClI 3项目，其中包含许多组件和内容。

我需要什么

是重用此项目并将其包含在客户网站上的一种非常简单的方法。我正在考虑仅添加一个JS文件，也许还添加一些HTML代码段。

我所做的事情：

我一直在使用VUE CLI 3将项目导出为Web组件。之所以有效，是因为现在我只需要使用一个JS文件和我创建的Web组件标签即可。

问题：

问题是我在项目中使用Tailwindcss样式化的所有内容都未在Web组件中进行样式化，因为这些样式似乎未包括在内。

通常，您会将样式包含在每个Vue组件本身中。（我使用的是.vue单个组件），但是由于我使用的是TailwindCSS，因此我在HTML标签上使用了很多类。这在我的VUE CLI 3项目中运行良好，因为我将PostCSS用于TailwindCSS。但是当我创建Web组件时，它不再起作用。我也不喜欢输出的CSS文件。我只有我的tailwind.css文件：

@tailwind preflight;
@tailwind components;


// my custom styles

@tailwind utilities;

我的问题：

那么如何获取TailwindCSS样式以及将自定义CSS样式添加到Web组件中？

Answer 1

我确定其中一些步骤对您来说是多余的，但是我想通过所有这些步骤来避免造成任何混乱：

确保您在项目的根文件夹中：

安装Tailwind CSS：npm install tailwindcss --save-dev
创建一个Tailwind配置文件：./node_modules/.bin/tailwind init tailwind.js 这样会在项目的根目录中创建一个名为tailwind.js的顺风顺水配置文件。
创建一个tailwind.css（您可以根据需要提供任何名称）文件。我通常将此文件放在assets/css/tailwind.css中。在此文件中，添加您在问题中指定的配置规则。您现在不必担心在此文件中包含自定义的CSS样式。
打开您的package.json文件，然后在脚本部分创建一个新的script：复制并粘贴："tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css"。

每次运行npm run tailwind时，顺风都会被编译并放入名为output.css的css文件中。

"scripts": {
    "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"

  },

如果要添加自己的自定义样式，请创建一个styles.css（可以使用任何名称）并将此文件也放置在assets/css/styles.css
现在让我们将这些css文件包含到我们的组件中：

打开您的App.vue文件。

在样式部分，导入文件：

<style lang="scss">
  @import "./assets/css/output";
  @import "./assets/css/styles";
</style>

完成。

如何将Tailwindcss集成到VUE CLI 3项目的Web组件中？

1 个答案: