Switch from Webpacker to cssbundling-rails, upgrade Tailwind CSS to version 3 #59
4
Gemfile
4
Gemfile
@@ -5,10 +5,6 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
|
||||
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
|
||||
# Use Puma as the app server
|
||||
gem 'puma', '~> 4.1'
|
||||
# Use SCSS for stylesheets
|
||||
gem 'sass-rails', '>= 6'
|
||||
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
|
||||
#gem 'webpacker', '~> 4.0'
|
||||
# Allows custom JS build tasks to integrate with the asset pipeline
|
||||
gem 'cssbundling-rails'
|
||||
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
//= link_tree ../images
|
||||
//= link_tree ../../javascript .js
|
||||
//= link_tree ../builds
|
||||
//= link admin.css
|
||||
//= link legacy.css
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
@import "legacy/variables";
|
||||
|
||||
body#admin-panel {
|
||||
#wrapper {
|
||||
> header {
|
||||
background: $color-red-bright;
|
||||
background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
|
||||
url('/img/bg-1.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
#main-nav {
|
||||
ul {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
li {
|
||||
a {
|
||||
&.active {
|
||||
border-bottom: 2px solid $color-red-bright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
/*
|
||||
* This is a manifest file that'll be compiled into legacy.css, which will include all the files
|
||||
* listed below.
|
||||
*
|
||||
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
|
||||
* vendor/assets/stylesheets directory can be referenced here using a relative path.
|
||||
*
|
||||
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
||||
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
||||
* files in this directory. Styles in this file should be added after the last require_* statement.
|
||||
* It is generally better to create a new file per style scope.
|
||||
*
|
||||
*= require_tree ./legacy/
|
||||
*= require_self
|
||||
*/
|
||||
2
app/assets/stylesheets/legacy.sass.scss
Normal file
2
app/assets/stylesheets/legacy.sass.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "legacy/layout";
|
||||
@import "legacy/main_nav";
|
||||
@@ -55,6 +55,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
body#admin-panel {
|
||||
#wrapper {
|
||||
> header {
|
||||
background: $color-red-bright;
|
||||
background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
|
||||
url('/img/bg-1.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
#main-nav {
|
||||
ul {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
li {
|
||||
a {
|
||||
&.active {
|
||||
border-bottom: 2px solid $color-red-bright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash-msg {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@@ -6,9 +6,8 @@
|
||||
<%= csp_meta_tag %>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
|
||||
<%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||
<%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||
<%= stylesheet_link_tag 'application' %>
|
||||
|
|
||||
<%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
|
||||
</head>
|
||||
<body id="admin-panel">
|
||||
<div id="wrapper">
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<%= csp_meta_tag %>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
|
||||
<%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||
<%= stylesheet_link_tag 'application' %>
|
||||
<%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<%= csp_meta_tag %>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
|
||||
<%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||
<%= stylesheet_link_tag 'application' %>
|
||||
<%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
|
||||
</head>
|
||||
<body class="layout-signup">
|
||||
<div id="wrapper">
|
||||
|
||||
@@ -14,12 +14,15 @@
|
||||
"postcss-preset-env": "^7.3.1",
|
||||
"tailwindcss": "^3.0.22",
|
||||
"turbolinks": "^5.2.0"
|
||||
"sass": "^1.49.7",
|
||||
},
|
||||
"version": "0.2.0",
|
||||
"devDependencies": {
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
|
||||
"build:css:sass": "sass ./app/assets/stylesheets/legacy.sass.scss ./app/assets/builds/legacy.css --no-source-map --load-path=node_modules",
|
||||
"build:css:tailwind": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
|
||||
"build:css": "yarn run build:css:sass && yarn run build:css:tailwind"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user
is the JS here still used? do we use turbolinks and such?
We use turbolinks still, but never added any JavaScript to the folders/templates in
app/javascript. The only custom JS we currently use is a little bit of vanilla inline JS in the wallet view.My response was wrong, removing JS obviously also removed Turbolinks. I upgraded everything to Rails 7, and it builds everything without Webpacker now, including Turbolinks.