修复 SassError,与升级到 webpacker 版本 5 时找不到样式表有关

Fix SassError, relating to cannot find stylesheet when upgrading to webpacker version 5

从 webpacker 版本 4 升级到版本 5.3.4 后,我看到以下错误。

    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "stylesheet/actiontext.scss"

 

我该如何解决这个问题?

升级到 webpacker 版本 5 进行了一些重大更改,包括如何在 ruby 中指定加载 scss 和 scss 文件=40=] 应用程序。之前在application.js我有

#app/javascripts/packs/application.js
...
import 'application.scss'

我的 application.scss 文件包含

#app/javascripts/application.scss
@import '/stylesheets/datatables.scss';
@import '/stylesheets/actiontext.scss'

指向我的 app/javascript/stylesheets 文件夹,其中包含两个文件 datatables.scss, actiontext.scss

webpacker Version 5对此进行了简化,无需指定配置。所以要解决这个问题

  1. 将您的 css(或 css)文件从 app/javascript/stylesheets 文件夹移动到 app/javascripts/packs 文件夹
  2. app/javascripts/packs/application.js
  3. 中删除 @import 指令
  4. 当一切正常时,删除 app/javascript/stylesheets 文件夹和 app/javascripts/application.scss 文件。 这个 post 有更多的细节。