Question

在我的Rails项目中，我将资产管道迁移到了webpack。我也将引导程序和样式表迁移到Webpack。样式已正确加载，但每次重新加载页面时都会出现故障（首先加载html）。这使得从一页导航到另一页很奇怪。我浏览了stackoverflow几个小时，并在webpack中添加了一个样式加载器，但似乎无法正确完成。

我做了一个屏幕录像来说明我的意思： https://imgur.com/2yWw0SQ

希望有人可以指出我正确的方向！感谢您的帮助。

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

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：

{
    "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：

<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

我今天偶然发现了解决方案。小故障是由Font Awesome引起的。

@tagliala的下一页上的解决方案对我有效： https://github.com/FortAwesome/Font-Awesome/issues/11924#issuecomment-475058975

将其导入您的application.js：

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

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

1 个答案: