【问题标题】:owl-carousel css not loading in production rails appowl-carousel css未在生产rails应用程序中加载
【发布时间】:2020-07-12 21:42:52
【问题描述】:

正如您在下面的开发环境中看到的,用于 owl carousel 的 css 已被拾取并加载。但是,在生产中它没有被拾取。

开发来源

生产来源

猫头鹰轮播节点模块

app/javascript/packs/application.js

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

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;

/package.json

{
  "name": "MangaReviews",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "^6.0.3-2",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "owl.carousel": "^2.3.4",
    "trix": "^1.2.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

config/webpack/environment.js


const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })
)

module.exports = environment

部署日志 rake 资产:预编译

【问题讨论】:

  • 将 stylesheet_link_tag 重命名为 stylesheet_pack_tag 以便在生产环境中工作

标签: css ruby-on-rails heroku webpack owl-carousel


【解决方案1】:

我找到了解决方案。我想当你通过 webpack 加载 css 时,你必须使用

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

我在我的 application.html.erb 中添加了它,它开始工作了。

【讨论】:

    猜你喜欢
    • 2013-03-14
    • 1970-01-01
    • 1970-01-01
    • 2014-03-31
    • 1970-01-01
    • 1970-01-01
    • 2013-03-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多