Question

我目前正在尝试通过Webpack将Tailwind安装到Rails 6应用程序中，但是在遵循文档之后，样式没有被应用到如图所示的视图模板中。我有Tailwind v1.0.3。我还尝试将Webpack升级到v4，所以不确定是否是由于这个原因。

我有以下文件：

javascript / css / application.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

我的packs / application.js如下：

require("stylesheets/application.scss")

还有我的/postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

我还可以从packaje.json文件中看到实际上已经安装了Tailwind。

{
  "name": "artsy_space",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "tailwindcss": "^1.0.3",
    "vue": "^2.5.17",
    "vue-loader": "14.2.2",
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

和application.html.erb

        <!DOCTYPE html>
    <html>
      <head>
        <title>ArtsySpace</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>

      <body>
          <p class="alert alert-error">
            <%= flash[:alert] %>
          </p>

          <p class="alert alert-info">
            <%= flash[:notice] %>
          </p>
        <%= yield %>
      </body>
    </html>

H

ere是仓库中的link to a PR。

有什么想法吗？

Answer 1

似乎您可能需要错误的目录。尝试更改：

require("stylesheets/application.scss")

收件人：

require("css/application.css")

还要注意，您需要一个.scss文件，但看起来实际文件是.css吗？

Answer 2

尝试将此行添加到您的javascript / packs / application.js文件

require("stylesheets/application.scss")

其他一切看起来都正确。

我还假设您在控制台中运行了yarn add tailwindcss。

如果无法添加该文件，请尝试在控制台中运行bin/webpack。

如果有任何错误消息，它们将帮助您调试问题。

无法将Tailwindcss安装到Rails 6中

2 个答案: