Skip to content

Commit

Permalink
Use headers with anchors in UPGRADING.md (#200)
Browse files Browse the repository at this point in the history
  • Loading branch information
JuanVqz authored Aug 22, 2024
1 parent 2abf542 commit fb52297
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions UPGRADING.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Alternatively, you can change modules to use relative imports, for example:
+ import './channels'
```

**Extracting Sass/SCSS from JavaScript**
### Extracting Sass/SCSS from JavaScript

In webpacker it is possible to extract Sass/SCSS from JavaScript by enabling `extract_css` in `webpacker.yml`. This allows for including those source files in JavaScript, e.g. `import '../scss/application.scss`

Expand Down Expand Up @@ -165,7 +165,7 @@ This is the command `yarn build` will use to bundle css files.

Now that the CSS files will be placed into `app/assets/build`, Sprockets no longer needs to worry about the `app/assets/stylesheets` folder. If you have any other `link_tree` for css files, remove them too.

**Configuring multiple entrypoints**
### Configuring multiple entrypoints

Sprockets will only compile files in the root directories listed in `manifest.js`, but the sass package that `yarn build` uses will also check subfolders, which might cause compilation errors if your scss files are using features like `@import` and variables. This means that if you have multiple entry points in your app, you have some extra work ahead of you.

Expand Down Expand Up @@ -196,7 +196,7 @@ Then adjust the `build` attribute in `package.json`:
"build:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --no-source-map --load-path=node_modules"
```

**Deprecation warnings**
### Deprecation warnings

Sass might raise deprecation warnings depending on what features you are using (such as division), but the messages will explain how to fix them. If you are not sure, see more details in the [official documentation](https://sass-lang.com/documentation/breaking-changes).

Expand All @@ -211,14 +211,14 @@ Start by following these steps:
5. Replace all asset_helpers (`image_url`, `font_url`) in css files with standard `urls`.
6. If you are importing only the frameworks you need (instead of `rails/all`), remove `require "sprockets/railtie"`;

**Asset paths**
### Asset paths

Propshaft will automatically include in its search paths the folders `vendor/assets`, `lib/assets` and `app/assets` of your project and of all the gems in your Gemfile. You can see all included files by using the `reveal` rake task:
```
rake assets:reveal
```

**Asset helpers**
### Asset helpers

Propshaft does not rely on asset_helpers (`asset_path`, `asset_url`, `image_url`, etc.) like Sprockets did. Instead, it will search for every `url` function in your css files, and adjust them to include the digest of the assets they reference.

Expand All @@ -244,7 +244,7 @@ Using the same path with `url` in Propshaft will cause it to raise an error, say

By adding a `/` at the start of the path we are telling Propshaft to consider this path as an absolute path. While this change in behavior increases the work a bit when upgrading, it makes **external libraries like FontAwesome and Bootstrap themes work out-of-the-box**.

**Asset content**
### Asset content

It's a common pattern in apps to inline small SVG files and low resolution versions of images that need to be displayed as quickly as possible. In Propshaft, the same line of code works for all environments:
```ruby
Expand All @@ -257,7 +257,7 @@ Rails.application.assets.load_path.find('logo.svg').content.html_safe
raw Rails.application.assets.load_path.find('logo.svg').content
```

**Precompilation in development**
### Precompilation in development

Propshaft uses a dynamic assets resolver in development mode. However, when you run `assets:precompile` locally Propshaft will then switch to a static assets resolver. Therefore, changes to assets will not be observed anymore and you will have to precompile the assets each time changes are made. This is different to Sprockets.

Expand Down

0 comments on commit fb52297

Please sign in to comment.