Невозможно установить Tailwindcss в Rails 6 - PullRequest
Новая
       62

Невозможно установить Tailwindcss в Rails 6

0 голосов
/ 08 июня 2019

В настоящее время я пытаюсь установить Tailwind в приложение rails 6 через Webpack, но после просмотра документов стили не применяются к шаблону представления, как показано на рисунке.У меня есть Tailwind v1.0.3.Я также пытался обновить Webpack до v4, поэтому не уверен, что это что-то из-за этого.

enter image description here

У меня есть следующие файлы:

javascript / css / application.css 

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

Мои пакеты / 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

это ссылка на PR в репо.

Есть идеи, что бы это могло быть?

1 Ответ

0 голосов
/ 27 июня 2019

Возможно, вам нужен неправильный каталог. Попробуйте изменить: 

require("stylesheets/application.scss")

до: 

require("css/application.css")

Кроме того, обратите внимание, что вам требуется файл .scss, но похоже, что фактический файл .css?

...