upgrade rails 6 to 7, "No loader is configured for '.scss' - ruby

Question

I'm trying to upgrade rails 6, but when I launch server via "bin/dev" command, I get this error: "
10:58:29 web.1 | started with pid 11431
10:58:29 css.1 | started with pid 11432
10:58:29 js.1 | started with pid 11433
10:58:29 worker.1 | started with pid 11436
10:58:29 css.1 | yarn run v1.22.5
10:58:29 js.1 | yarn run v1.22.5
10:58:29 css.1 | warning ../../package.json: No license field
10:58:29 js.1 | warning ../../package.json: No license field
10:58:29 css.1 | $ sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
10:58:29 js.1 | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --watch
10:58:29 js.1 | ✘ [ERROR] No loader is configured for ".scss" files: app/javascript/stylesheets/application.scss
10:58:29 js.1 |
10:58:29 js.1 | app/javascript/application.js:6:7:
10:58:29 js.1 | 6 │ import './stylesheets/application.scss';
10:58:29 js.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10:58:29 js.1 |
10:58:29 js.1 | 1 error
10:58:29 js.1 | [watch] build finished, watching for changes...
0:58:32 web.1 | => Booting Puma
10:58:32 web.1 | => Rails 7.0.2.3 application starting in development
10:58:32 web.1 | => Run `bin/rails server --help` for more startup options
10:58:32 css.1 | Sass is watching for changes. Press Ctrl-C to stop.
10:58:32 css.1 |
10:58:32 web.1 | Puma starting in single mode...
10:58:32 web.1 | * Puma version: 5.6.4 (ruby 3.1.2-p20) ("Birdie's Version")
10:58:32 web.1 | * Min threads: 5
10:58:32 web.1 | * Max threads: 5
10:58:32 web.1 | * Environment: development
10:58:32 web.1 | * PID: 11431
10:58:32 web.1 | * Listening on http://127.0.0.1:3000
10:58:32 web.1 | * Listening on http://[::1]:3000
10:58:33 web.1 | Use Ctrl-C to stop
10:58:33 worker.1 | 2022-04-25T08:58:33.680Z pid=11436 tid=aqg INFO: Booted Rails 7.0.2.3 application in development environment
10:58:33 worker.1 | 2022-04-25T08:58:33.681Z pid=11436 tid=aqg INFO: Running in ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]
10:58:33 worker.1 | 2022-04-25T08:58:33.681Z pid=11436 tid=aqg INFO: See LICENSE and the LGPL-3.0 for licensing details.
10:58:33 worker.1 | 2022-04-25T08:58:33.681Z pid=11436 tid=aqg INFO: Upgrade to Sidekiq Pro for more features and support: https://sidekiq.org
10:58:33 worker.1 | 2022-04-25T08:58:33.681Z pid=11436 tid=aqg INFO: Booting Sidekiq 6.4.2 with redis options {}
Server starts, but no stylesheets are apllied. I tried to search for something on this topic, but all the results were about webpacker.
package.json
{
"name": "testing",
"private": true,
"dependencies": {
"#hotwired/stimulus": "^3.0.1",
"#hotwired/turbo-rails": "7.1.1",
"#rails/actiontext": "^6.1.5",
"#rails/ujs": "^6.1.5",
"#zxing/browser": "^0.1.1",
"#zxing/library": "^0.19.1",
"animate.css": "^4.1.1",
"aos": "^2.3.4",
"autoprefixer": "^10.4.5",
"chart.js": "^3.6.1",
"chartkick": "^4.1.1",
"esbuild": "^0.14.38",
"esbuild-sass-plugin": "^2.2.6",
"flatpickr": "^4.6.9",
"postcss": "^8.4.12",
"sass": "^1.50.1",
"stimulus_reflex": "3.4.1",
"swiper": "^6.8.0",
"tailwindcss": "^3.0.24",
"tailwindcss-stimulus-components": "^3.0.1",
"toastr": "^2.1.4",
"trix": "^1.2.0"
},
"engines": {
"node": "16.x"
},
"version": "0.1.0",
"scripts": {
"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
}
}
tailwind.config.js
module.exports = {
content: [
'./app/views/**/*.html.haml',
'./app/helpers/**/*.rb',
'./app/assets/stylesheets/**/*.css',
'./app/javascript/**/*.js'
]
}
Procfile.dev
web: bin/rails server -p 3000
css: yarn build:css --watch
js: yarn build --watch
worker: bundle exec sidekiq -C config/sidekiq.yml
application.html.haml
!!!
%html.text-gray-900.leading-tight.max-w-screen{:translate => "no", :lang => t('language_code')}
%head
= display_meta_tags
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title= content_for?(:title) ? yield(:title) : "testin"
%link{:href => "https://unpkg.com/swiper/swiper-bundle.css", :rel => "stylesheet"}/
%link{:href => "https://unpkg.com/swiper/swiper-bundle.min.css", :rel => "stylesheet"}/
%meta{:content => content_for?(:description) ? yield(:description) : "testin", :name => "description"}/
%meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
= csrf_meta_tags
= csp_meta_tag
= action_cable_meta_tag
= stylesheet_link_tag "application", "data-turbo-track": "reload"
%body.bg-white.w-full.overflow-x-hidden.static.min-h-screen{"data-controller" => "modal", "data-modal-allow-background-close" => "false"}
.w-full.mx-auto.flex.flex-col.h-screen
= render 'layouts/navigation'
.w-full.h-full.flex-grow.z-0.md.overflow-y-auto{:role => "main"}
= yield
= toastr_flash
= render 'layouts/footer'
:javascript
window.locale = "#{escape_javascript I18n.locale}"
app/javascript/application.js
// Entry point for the build script in your package.json
import Rails from '#rails/ujs';
import * as ActiveStorage from '#rails/activestorage';
import './channels';
import './stylesheets/application.scss';
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";
import "chartkick/chart.js"
import "./controllers"
// import Swiper JS
import Swiper from 'swiper';
import SwiperCore, { Navigation, Pagination } from 'swiper/core';
SwiperCore.use([Navigation, Pagination]);
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
autoHeight: true,
calculateHeight: true,
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
// Animation on scroll
import AOS from 'aos';
import 'aos/dist/aos.css';
Rails.start();
ActiveStorage.start();
global.toastr = require('toastr');
require('trix');
require('#rails/actiontext');
// Google Maps callback
window.initMap = function (...args) {
const event = document.createEvent('Events');
event.initEvent('google-maps-callback', true, true);
event.args = args;
window.dispatchEvent(event);
};
document.addEventListener('turbo:load', () => {
flatpickr(".datepicker", {
enableTime: true,
minDate: "today"
})
AOS.init({ duration: 1200, offset: 300 });
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
});
Any ideas what goes wrong? I updated the app based on this video: https://www.youtube.com/watch?v=SjdV_1k1QWY&t

Answer 1

Uncomment your gem and bundle install. Looks like your including sass, but rails doesn't know to include sass/scss.
Use Sass to process CSS
gem "sassc-rails"
I had this same issue running a Rails project when starting with this command and I was really confused why Rails didn't know what to do upon initialization
rails new clickit -d=postgresql -j=esbuild -c=sass