В моем проекте Rails я перенес свой конвейер ресурсов в webpack. Я также перенес загрузчик и таблицы стилей в Webpack. Стиль загружается правильно, за исключением того, что у меня возникает сбой при каждой перезагрузке страницы (сначала загружается HTML). Это делает странным переход с одной страницы на другую.
Я просмотрел stackoverflow в течение нескольких часов и добавил загрузчик стилей в веб-пакет, но, похоже, не могу сделать это правильно.
Я сделал скриншот, чтобы проиллюстрировать, что я имею в виду:
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>