如何在Rails 6中配置顺风以在Heroku上正确显示

问题描述

我用tailwindcss构建了一个简单的Rails 6应用程序并将其部署到heroku 'my app' 如果您单击链接，将会看到我的问题..... 看起来就是这样

该应用会在本地进行渲染，但是一旦从heroku中查看后，该页面将无法正确显示。当我检查页面时，我可以看到html中存在顺风样式，这仅使我相信资产管道配置不正确，heroku无法选择顺风配置。

如果有人以前有过经历，或者可以指导我确定我哪里出了问题，我将非常感激。

谢谢

app / javascript / packs / application.js

//=require activestorage

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

import "../stylesheets/application.scss"

app / javascript / stylesheets / application.scss

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

postcss.config.js

let environment = {
  plugins: [
      require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),require('postcss-import'),require('postcss-flexbugs-fixes'),require('postcss-preset-env')({
      autoprefixer: {
        flexBox: 'no-2009'
      },stage: 3
    })
  ]
};

if (process.env.RAILS_ENV === 'production') {
  environment.plugins.push(
      require('@fullhuman/postcss-purgecss')({
        content: [
            './app/**/.html.erb','./app/helpers/**/*.rb',],defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
      })
  )
}
module.exports = environment

package.json

{
  "name": "pantry_staples","private": true,"dependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0","@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "4.3.0","jquery": "^3.5.1","tailwindcss": "^1.7.3","@tailwindcss/custom-forms": "^0.2.1","turbolinks": "^5.2.0"
  },"version": "0.1.0","devDependencies": {
    "stylelint": "^13.3.3","stylelint-config-standard": "^20.0.0","stylelint-csstree-validator": "^1.8.0","stylelint-scss": "^3.17.2","webpack-dev-server": "^3.11.0"
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）