Rails + Foundation Sites 与 Webpacker + Asset Pipeline

问题描述

我需要有人帮我解决这个问题..我让它工作了一半并且对正在发生的事情有所了解，但有一个主要问题：

• 每次重新加载我的应用程序时（登录/退出或刷新页面时），Javascript 加载缓慢，这意味着您只能看到 HTML/CSS 大约一秒钟。这在使用 webpack-dev-server 时也成立
• 我的猜测是 webpacker 会在发生这种情况时重新编译。不过不知道是什么原因。不知道在 Rails 日志中最好的调试方法是什么，我没有找到任何线索

从研究中我了解到

• Webpacker 和 Asset Pipeline 共享任务：用于 JS 的 Webpacker 和用于 CSS 的 Asset Pipeline。 Asset Pipeline 作用于 app/assets/ 而 webpack 通过 app/javascript
• Webpacker CSS 处理通过 application.html.erb 中的 stylesheet_pack_tag 引用和 webpacker.yml 中的 extract_css: false/true 打开/关闭。我把这两个都关掉了，所以 CSS 由 Asset Pipeline 处理。

更新：将 .scss 文件放入 app/assets/stylesheets 并通过 application.scss 链接后，一切都被炸毁了，JS 和 CSS。所以这里真的很危险..

这是我当前的设置：

app/assets/stylesheets/application.scss

 @import "./actiontext.scss";
 @import 'foundation-sites/scss/foundation.scss';
 @import 'settings';
 @include foundation-everything(); 

app/assets/stylesheets/_settings.scss

//  Foundation for Sites Settings
//  -----------------------------
//
//  Table of Contents:
//
//   1. Global
//   2. Breakpoints
//   3. The Grid

// ... etc. this sheet is functional!

app/javascript/application.js

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

import { Foundation } from 'foundation-sites'
import $ from 'jquery'

document.addEventListener('turbolinks:load',() => {
  $(document).foundation()
});

config/webpack/environment.js

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

const webpack = require('webpack');

// this belongs to Foundation
environment.loaders
    .get('sass')
    .use.find(item => item.loader === 'sass-loader').options.includePaths = [
      'node_modules'
    ]

// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
module.exports = environment

config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

感谢您的任何意见！

解决方法

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

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

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