![](/img/trans.png)
[英]Clarity on response formats and page reload for html response in Rails
[英]Rails webpack page glitches on reload (html loaded first)
在我的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>
我今天偶然發現了解決方案。 該故障是由Font Awesome引起的。
@tagliala的下一頁上的解決方案對我有用: https : //github.com/FortAwesome/Font-Awesome/issues/11924#issuecomment-475058975
將其導入到application.js中:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.