升级导轨6至7，“不配置为＆＃x27; .scss＆＃x27;

Question

我正在尝试升级Rails 6，但是当我通过“ bin/dev”命令启动服务器时，我会收到此错误：“

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 {}

服务器启动，但是没有样式表。我试图在此主题上搜索某些内容，但是所有结果

的

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

webpacker

module.exports = {
  content: [
    './app/views/**/*.html.haml',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js'
  ]
}

是

web: bin/rails server -p 3000
css: yarn build:css --watch
js: yarn build --watch
worker: bundle exec sidekiq -C config/sidekiq.yml

。

!!!
%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}"

关于 strong> 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',
    },
  });
});

有什么想法是什么问题？ “ rel =“ nofollow noreferrer”> https://www.youtube.com/watch?v=sjdv_1k1qwy＆amp;t

Answer 1

取消您的宝石和束安装。看起来您包括SASS，但Rails不知道包含SASS/SCS。

使用SASS处理CSS

宝石“ sassc-rails”

从该命令开始时，我遇到了同样的问题，我真的很困惑，为什么Rails在初始化时不知道该怎么办

rails new Clickit -d = postgresql -j = esbuild -c = sass