"Hmm? Shall we see it here?"
So, I was embarrassed to get hooked without noticing it, so I made a memorandum.
There is a lot of information on stories such as npm and yarn, so go there.
:application.html.erb
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Since it is, both js and css are build targets.
app/
└ javascript/
└ packs/
| └ application.js
└ stylesheets/
└ application.css
└ custom.min.css
application.js
~~abridgement~~
import "../stylesheets/application";
application.css
@import "~bootstrap/scss/bootstrap";
@import "./custom.min";
Hmmmm.
$ bin/webpack
~~abridgement~~
ERROR in ./app/javascript/stylesheets/application.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~bootstrap/scss/bootstrap'
~~abridgement~~
I checked the file structure including this area, but there was no problem.
I checked the error again. .. ..
ERROR in ./app/javascript/stylesheets/application.css
application.css!!
$ mv app/javascript/stylesheets/application.css app/javascript/stylesheets/application.scss
$ bin/webpack
Successful build. Tohoho. ..
Be careful with the extension.
Recommended Posts