Невозможно развернуть Tailwind CSS в приложении Rails 6 для Heroku - PullRequest
Новая
       21

Невозможно развернуть Tailwind CSS в приложении Rails 6 для Heroku

0 голосов
/ 12 апреля 2020

В настоящее время я пытаюсь развернуть приложение rails 6 на Heroku. Я попытался ответить в посте о подобной проблеме, но безуспешно. . Я не уверен, откуда исходит ошибка, так как стили хорошо работают при разработке, но ломаются при продвижении в производство. Не знаете, связано ли это с тем, что в данный момент он компилирует css ресурсов с помощью sass? 

 [14] ./node_modules/@rails/actiontext/app/javascript/actiontext/index.js + 1 modules 2.64 KiB {0} [built]
remote:             |    2 modules
remote:            + 7 hidden modules
remote:        
remote:        ERROR in ./app/javascript/stylesheets/application.scss
remote:        Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
remote:        ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
remote:        
remote:        @import "tailwindcss/base";
remote:        ^
remote:              File to import not found or unreadable: tailwindcss/base.
remote:              in /tmp/build_d98149372aae5001d8aada1182784254/app/javascript/stylesheets/application.scss (line 1, column 1)
remote:            at runLoaders (/tmp/build_d98149372aae5001d8aada1182784254/node_modules/webpack/lib/NormalModule.js:316:20)

Не уверен, почему File to import not found or unreadable: tailwindcss/base. не загружается. Из документации на Tailwind видно, что добавить его через @import

javascript/stylesheets/application.scss  
​
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Tailwind также отображается в зависимостях. 

package.json

  "version": "0.1.0",
  "devDependencies": {
    "tailwindcss": "^1.2.0",
    "webpack-dev-server": "^3.7.1"
  }

views / layouts / application. html .erb 

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all',  'data-turbolinks-track': 'reload' %>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />

, если процессор ресурсов не определен, по умолчанию используется sass, что я и использую для компиляции css. Я думал, что это может быть причиной, почему не работает.

config / environment / production.rb 

  # Compress CSS using a preprocessor.
  # config.assets.css_compressor = :sass
  config.assets.js_compressor = :uglifier

post css .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
        })
      ]
    }

От чтения соответствующего набора сообщений переполнения стека extract_css: до истины

webpacker.yml 

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

В чем может быть проблема?

1 Ответ

2 голосов
/ 13 апреля 2020 
 "devDependencies": {
    "tailwindcss": "^1.2.0",
    "webpack-dev-server": "^3.7.1"
  }

Попутный ветер находится в зависимости от dev, поэтому это не будет работать на производстве, переместите зависимость за пределы devDependencies, чтобы его можно было использовать на производстве.

...