Rails Webpack页面在重新加载时出现故障（首先加载html）

Question

In my Rails project I migrated my asset pipeline to webpack. 在我的Rails项目中，我将资产管道迁移到了webpack。 I also migrated bootstrap and stylesheets to Webpack. 我也将引导程序和样式表迁移到Webpack。 The styling is loaded correctly, except that I have a glitch on every page reload (html is loaded first). 样式已正确加载，但每次重新加载页面时都会出现故障（首先加载html）。 This makes it weird to navigate from one page to another. 这使得从一页导航到另一页很奇怪。 I browsed stackoverflow for a couple of hours and added a style loader to webpack, but can't seem to get it right. 我浏览了stackoverflow几个小时，并在webpack中添加了一个样式加载器，但似乎无法正确完成。

I made a screen vide to illustrate what I mean: https://imgur.com/2yWw0SQ 我做了一个屏幕录像来说明我的意思： https : //imgur.com/2yWw0SQ

Hope someone can point me in the right direction! 希望有人能指出正确的方向！ Thanks for the help. 谢谢您的帮助。

Environment.js: Environment.js：

const {environment} = require('@rails/webpacker');
const webpack = require('webpack');
const styleLoader = require('./styleloader');

environment.config.merge(styleLoader);
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

Styleloader.js Styleloader.js

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader", // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

Package.json: Package.json：

{
    "dependencies": {
        "@babel/core": "^7.4.4",
        "@fortawesome/fontawesome-free": "^5.9.0",
        "@rails/ujs": "^6.0.0-alpha",
        "@rails/webpacker": "^4.0.2",
        "activestorage": "^5.2.3",
        "babel-loader": "^8.0.6",
        "bootstrap": "^4.3.1",
        "bootstrap-select": "^1.13.10",
        "choices.js": "^7.0.0",
        "css-loader": "^2.1.1",
        "jquery": "^3.4.1",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.11",
        "node-sass": "^4.12.0",
        "popper": "^1.0.1",
        "popper.js": "^1.14.7",
        "rails-ujs": "^5.2.3",
        "sass-loader": "^7.1.0",
        "stimulus": "^1.1.1",
        "style-loader": "^0.23.1",
        "sweetalert2": "^8.13.0",
        "tempusdominus-bootstrap-4": "^5.1.2",
        "tempusdominus-core": "5.0.3",
        "turbolinks": "^5.2.0",
        "webpack": "^4.35.2",
        "webpack-cli": "^3.3.2"
    },
    "devDependencies": {
        "sass-loader": "*",
        "node-sass": "*",
        "webpack-dev-server": "^3.2.1"
    }
}

Application.html.erb: Application.html.erb：

<head>
    <title>Youba</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag "application", 'data-turbolinks-track': 'reload' %>
</head>

Answer 1

I stumbled upon the solution today. 我今天偶然发现了解决方案。 The glitch was caused by Font Awesome. 该故障是由Font Awesome引起的。

The solution on the following page from @tagliala worked for me: https://github.com/FortAwesome/Font-Awesome/issues/11924#issuecomment-475058975 @tagliala的下一页上的解决方案对我有用： https : //github.com/FortAwesome/Font-Awesome/issues/11924#issuecomment-475058975

Import this in your application.js: 将其导入到application.js中：

https://github.com/diowa/ruby2-rails5-bootstrap-heroku/blob/422467be1206e2887ec49f71ba2866daf4c477a2/app/javascript/src/fontawesome.js https://github.com/diowa/ruby2-rails5-bootstrap-heroku/blob/422467be1206e2887ec49f71ba2866daf4c477a2/app/javascript/src/fontawesome.js

Rails Webpack页面在重新加载时出现故障（首先加载html）

问题描述

1 个解决方案

解决方案1
0 2019-07-12 08:26:41

Rails Webpack页面在重新加载时出现故障（首先加载html）

问题描述

1 个解决方案

解决方案1 0 2019-07-12 08:26:41

解决方案1
0 2019-07-12 08:26:41