3

这是我所拥有的：

一个 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 组件中呢？

4

1 回答 1

6

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

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

  1. 安装 Tailwind CSS：npm install tailwindcss --save-dev

  2. 创建 Tailwind 配置文件：./node_modules/.bin/tailwind init tailwind.js 这将创建一个tailwind.js在项目根目录中调用的 Tailwind 配置文件。

  3. 创建一个tailwind.css（你可以给它任何你想要的名字）文件。我通常把这个文件放在assets/css/tailwind.css. 在此文件中，添加您在问题中指定的配置规则。您现在不必担心在此文件中包含您的自定义 css 样式。

  4. 打开你的 package.json 文件并script在脚本部分创建一个新文件：复制粘贴这个："tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css"。

每次运行npm run tailwind时，tailwind 都会被编译并放入一个名为 .css 的 css 文件output.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"
    
  },

  1. 如果要添加自己的自定义样式，请创建一个styles.css（可以使用任何名称）并将此文件也放在assets/css/styles.css

  2. 现在让我们将这些 css 文件包含到我们的组件中：

打开你的App.vue文件。

在样式部分，导入文件：

<style lang="scss">
  @import "./assets/css/output";
  @import "./assets/css/styles";
</style>
于 2018-09-23T18:45:53.780 回答