This repository has been archived by the owner on Feb 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 ``` ## 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-rails` gem. Finally, I was able to remove the `esbuild-sass-plugin` node module since I'm not using esbuild to bundle sass anymore. [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
- Loading branch information
1 parent
ec79632
commit 7025d49
Showing
19 changed files
with
28 additions
and
81 deletions.
There are no files selected for viewing
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
web: bin/rails server -p 3000 | ||
js: yarn build --watch | ||
css: yarn build:css --watch |
Empty file.
This file was deleted.
Oops, something went wrong.
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,6 @@ | |
@use "sass:math"; | ||
|
||
@import "../reset"; | ||
@import "normalize.css"; | ||
@import "variables"; | ||
|
||
@import "base"; | ||
|
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import "../assets/javascripts/detector"; | ||
import "../assets/javascripts/scrollDown"; | ||
import "../assets/javascripts/song"; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import "../assets/javascripts/detector"; |
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
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
This file was deleted.
Oops, something went wrong.
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -243,14 +243,6 @@ [email protected]: | |
resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.28.tgz#9d7b0ca421ae580ab945c69c33eabd793262a84c" | ||
integrity sha512-HBv18rVapbuDx52/fhZ/c/w6TXyaQAvRxiDDn5Hz/pBcwOs3cdd2WxeIKlWmDoqm2JMx5EVlq4IWgoaRX9mVkw== | ||
|
||
esbuild-sass-plugin@^2.2.5: | ||
version "2.2.5" | ||
resolved "https://registry.yarnpkg.com/esbuild-sass-plugin/-/esbuild-sass-plugin-2.2.5.tgz#2016cdbfe9f192129c5adcdfeaac8d87fd8bc7d8" | ||
integrity sha512-AoKHFu/qKPxyo2bLzqP4/n+27f/1acO4dHsUeqRVflEgnUqis6+pPdoS2nLhmC6sPwIwzK0C8bQ0A4Bt30qkeg== | ||
dependencies: | ||
esbuild "^0.14.13" | ||
sass "^1.49.0" | ||
|
||
[email protected]: | ||
version "0.14.28" | ||
resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.28.tgz#5b82807ebe435519a2689e1a4d50b8a3cc5c64c0" | ||
|
@@ -271,7 +263,7 @@ [email protected]: | |
resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.28.tgz#c527d52ec7d1f868259d0f74ecc4003e8475125d" | ||
integrity sha512-VhXGBTo6HELD8zyHXynV6+L2jWx0zkKnGx4TmEdSBK7UVFACtOyfUqpToG0EtnYyRZ0HESBhzPSVpP781ovmvA== | ||
|
||
esbuild@^0.14.13, esbuild@^0.14.28: | ||
esbuild@^0.14.28: | ||
version "0.14.28" | ||
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.28.tgz#7738635d2ea19e446bd319d83a1802545e6aebb8" | ||
integrity sha512-YLNprkCcMVKQ5sekmCKEQ3Obu/L7s6+iij38xNKyBeSmSsTWur4Ky/9zB3XIGT8SCJITG/bZwAR2l7YOAXch4Q== | ||
|
@@ -455,11 +447,6 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: | |
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" | ||
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== | ||
|
||
normalize.css@^8.0.1: | ||
version "8.0.1" | ||
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" | ||
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== | ||
|
||
picomatch@^2.0.4, picomatch@^2.2.1: | ||
version "2.3.1" | ||
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" | ||
|
@@ -522,10 +509,10 @@ readdirp@~3.6.0: | |
dependencies: | ||
picomatch "^2.2.1" | ||
|
||
sass@^1.49.0: | ||
version "1.49.9" | ||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9" | ||
integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A== | ||
sass@^1.54.3: | ||
version "1.54.3" | ||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.3.tgz#37baa2652f7f1fdadb73240ee9a2b9b81fabb5c4" | ||
integrity sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw== | ||
dependencies: | ||
chokidar ">=3.0.0 <4.0.0" | ||
immutable "^4.0.0" | ||
|