无法将 Rails 6 应用程序上的 TailwindCSS 部署到 Heroku

Question

我目前正在尝试将我的 rails 6 应用程序部署到 Heroku。我在一篇关于类似问题的帖子中尝试了答案，但没有运气。. 我不确定错误来自哪里，因为这些样式在开发中运行良好，但在推送到生产时会中断。不确定它是否与当前正在使用 sass 编译 css 资产有关？

 [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"
  }

视图/布局/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 的。我认为这可能是不起作用的原因。

配置/环境/production.rb

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

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
        })
      ]
    }

从阅读相关的堆栈溢出帖子设置 extract_css:为 true

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

可能是什么问题？

Answer 1

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

Tailwind 位于开发依赖项中，因此这在生产中不起作用，因此将依赖项移到外部devDependencies以便可以在生产中使用。