Question

我当前正在尝试将Rails 6应用程序部署到Heroku。我在有关similar issue but had no luck.的帖子中尝试了答案。我不确定错误的出处，因为这些样式在开发中效果很好，但是在推向生产时就中断了。不确定是否与当前使用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.为什么不加载。根据{{3}}

上的文档

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

通过阅读相关的Stack溢出帖子，将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之外，因此可以在生产环境中使用。

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

1 个答案: