This repository has been archived by the owner on Feb 18, 2024. It is now read-only.
Switch to cssbundling-rails #570
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Using esbuild to compile SCSS files works for the SCSS part, but not
for assets that are referenced inside the SCSS files. Images are
processed by the asset pipeline. The pipeline turns images like
`foo.png` into
`foo-138b348edbc780482d40f0abc5b57e487c0ecf24cfbde42d54007cfd8db0d7a4.pn
g`. SCSS files still refer to them as `url("foo.png")`, but the final
path to the image must include the hash in production. To make sure the
final CSS file can find these images, sprockets-rails [scans] all CSS
files using `AssetUrlProcessor`, which replaces `url("foo.png")` with
the hashed version.
Another complication was in a previous version of my asset pipeline
esbuild located assets relative to the CSS file the refernced them.
Sprockets doesn't look there. It [searches] any directory in
`app/assets`. All the asset urls in SCSS files needed to be changed to
be relative to those search paths instead, e.g. `../../images/foo.png`
to `foo.png`.
I have three base css files: application, blog, and admin. To support
them all I changed the `sass` command to look in
`./app/assets/stylesheets` and build to `./app/assets/builds` instead
of looking at each individual file ([sass reference]). It built the
`admin.css` file inside of an `admin/` directory, so the
`stylesheet_link_tag` had to change to reflect that.
Building asseets in development now either requires running the css,
js, _and_ rails server. You can use `bin/dev` to start all three, or
start them manually:
```
yarn build --watch
yarn build:css --watch
rails s
```
[scans]: rails/cssbundling-rails#22
[searches]: https://guides.rubyonrails.org/asset_pipeline.html#search-paths
[sass reference]: https://sass-lang.com/documentation/cli/dart-sass#many-to-many-mode
edwardloveall
force-pushed
the
el-assets
branch
from
7138854
to
dbc8e19
Compare
## remove webpack-jquery-ui, add jquery When I originally switched to webpacker, I needed to add jquery which is a supporting library for my custom jquery-ui build which lets me drag and drop to sort items on the backend. The webpack one adds tons of depencencies, where as jquery is just one. ## remove normalize.css I wasn't able to get normalize.css imported from the node modules, but I also removed it and it didn't seem to break anything. So I'm going to keep it removed, as well as remove the `normalize-rails` gem. ## remove esbuild-sass-plugin Finally, I was able to remove the `esbuild-sass-plugin` node module since I'm not using esbuild to bundle sass anymore.
edwardloveall
force-pushed
the
el-assets
branch
from
dbc8e19
to
651f696
Compare
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Using esbuild to compile SCSS files works for the SCSS part, but not for assets that are referenced inside the SCSS files. Images are processed by the asset pipeline. The pipeline turns images like
foo.pngintofoo-138b348edbc780482d40f0abc5b57e487c0ecf24cfbde42d54007cfd8db0d7a4.png. SCSS files still refer to them asurl("foo.png"), but the final path to the image must include the hash in production. To make sure the final CSS file can find these images, sprockets-rails scans all CSS files usingAssetUrlProcessor, which replacesurl("foo.png")with the hashed version.Another complication was in a previous version of my asset pipeline esbuild located assets relative to the CSS file the refernced them. Sprockets doesn't look there. It searches any directory in
app/assets. All the asset urls in SCSS files needed to be changed to be relative to those search paths instead, e.g.../../images/foo.pngtofoo.png.I have three base css files: application, blog, and admin. To support them all I changed the
sasscommand to look in./app/assets/stylesheetsand build to./app/assets/buildsinstead of looking at each individual file (sass reference). It built theadmin.cssfile inside of anadmin/directory, so thestylesheet_link_taghad to change to reflect that.Building asseets in development now either requires running the css, js, and rails server. You can use
bin/devto start all three, or start them manually:Other cleanup
I wasn't able to get normalize.css imported from the node modules, but I also removed it and it didn't seem to break anything. So I'm going to keep it removed, as well as remove the
normalize-railsgem.Finally, I was able to remove the
esbuild-sass-pluginnode module since I'm not using esbuild to bundle sass anymore.