3

我目前正在尝试通过 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

是repo 中PR 的链接。

知道可能是什么吗？

4

2 回答 2

1

看来您可能需要错误的目录。尝试改变：

require("stylesheets/application.scss")

至：

require("css/application.css")

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

于 2019-06-27T00:00:48.597 回答
0

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

require("stylesheets/application.scss")

其他一切看起来都是正确的。

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

如果添加该文件不起作用，请尝试bin/webpack在控制台中运行。

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

于 2020-01-20T18:53:30.480 回答