82998


まず

[code]

    rails new test
    cd test
    bundle install
    yarn install --check-files
    bin/rails s -b '0.0.0.0'
    
[/code]

で Rails のデフォルト画面は表示されました

* * *

次に  
<https://railsguides.jp/webpacker.html>  
を参考にして

[code]

    rails webpacker:install
    
[/code]

**app/javascript/packs/application.js**

[code]

    require("@rails/ujs").start()
    require("turbolinks").start()
    require("@rails/activestorage").start()
    require("channels")
    
    console.log('application.js');
    
[/code]

と最後に console.log を追記して  
`rails g controller top index`  
で適当なコントローラを作ってから  
ブラウザで /top/index を表示してみたところ console.log の内容も表示できました

* * *

それから  
app/javascript/packs/application.scss  
を作り、とりあえず中身はからにして

app/javascript/packs/application.js に

[code]

    import "./application.scss";
    
[/code]

を追加しました

ブラウザで /top/index 表示してみると  
`console.log('application.js');`  
が表示されなくなってしまいました

Rails のログは以下ですが特にエラーはなさそうに見えます  
chrome の開発ツールのログにもエラーはありません

[code]

    Started GET "/top/index" for 172.20.0.1 at 2021-09-03 01:45:29 +0000
    Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
    Processing by TopController#index as HTML
      Rendering top/index.html.erb within layouts/application
      Rendered top/index.html.erb within layouts/application (Duration: 0.2ms | Allocations: 4)
    [Webpacker] Compiling...
    [Webpacker] Compiled all packs in /home/test/public/packs
    [Webpacker] Hash: 328ec5928f92fffafca1
    Version: webpack 4.46.0
    Time: 15058ms
    Built at: 09/03/2021 1:45:50 AM
                                         Asset       Size       Chunks                         Chunk Names
        js/application-b4bed5c7f33d515b12c7.js    756 KiB  application  [emitted] [immutable]  application
    js/application-b4bed5c7f33d515b12c7.js.map    782 KiB  application  [emitted] [dev]        application
                                 manifest.json  364 bytes               [emitted]
    Entrypoint application = js/application-b4bed5c7f33d515b12c7.js js/application-b4bed5c7f33d515b12c7.js.map
    [./app/javascript/packs/application.scss] 664 bytes {application} [built]
    [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/packs/application.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/packs/application.scss 741 KiB {application} [built]
        + 2 hidden modules
    
    Completed 200 OK in 21458ms (Views: 21456.5ms | ActiveRecord: 0.0ms | Allocations: 4841)
    
    
[/code]

**環境**

rails 6.0.4.1  
npm 6.14.14  
yarn 1.22.11

よろしくお願いします

* * *

追記

SCSS ではなく app/javascript/packs/application.css にして  
`import "./application.css";`  
をかくと console.log は表示されました

ただ css の中で @import とかが使えないので bootstrap 等を使えなくなってしまいます

どうすればエントリーファイルに SCSS を使うことができるのでしょうか

* * *

さらに追記  
packs ではなく別ディレクトリを作って

app/javascript/stylesheets/application.scss

において application.js に

`import "../stylesheets/application.scss";`

とかいたところ動くようになりました

Rails ガイドにはエントリファイルは packs におけっていってるんですが  
同じファイルの .js と .scss を同じ場所におくのがダメということなんでしょうか  
import の検索パスの詳細がわかるドキュメント等があれば教えていただきたいです


CC BY-SA 4.0
2021-09-03T01:57:46.063
82196
2021-10-11T00:47:35.047
2021-09-03T08:29:46.337
question
ruby-on-rails webpacker
rails webpacker でエントリファイルにSCSSが使えない


エントリポイントを packs に配置すると言う以外に JavaScript, CSS
のファイルの配置についてのルールはないと思います。（少なくとも私は知りません）

6.1.4.1 で試して見ましたが

> app/javascript/packs/application.scss を作り、とりあえず中身はからにして
>
> app/javascript/packs/application.js に
>
> import "./application.scss"; を追加しました
>
> ブラウザで /top/index 表示してみると console.log('application.js');  
>  が表示されなくなってしまいました

という事象は再現できず、`console.log` の内容が出力されて scss のスタイルも適用できました。

最新の Rails にあげることで解決するかも知れません。


CC BY-SA 4.0
2021-10-11T00:47:35.047
82998
2021-10-11T00:47:35.047
8329
82196
answer