Skip to content

Commit 875eb5b

Browse files
committed
docs: Clarify shell scss usage in dev mode
The shell's SCSS must be explicitly loaded by site.config.dev.tsx.
1 parent bf52cfb commit 875eb5b

File tree

1 file changed

+12
-5
lines changed

1 file changed

+12
-5
lines changed

docs/how_tos/migrate-frontend-app.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -779,14 +779,21 @@ These modules should be unopinionated about the path prefix where they are mount
779779
Create an app.scss file
780780
=======================
781781

782-
This is required if you intend to run builds from the app itself.
782+
This is required for running the app in dev mode.
783783

784784
Create a new `app.scss` file at the top of your application. It's responsible for:
785785

786-
1. Importing the shell's stylesheet, which includes Paragon's core stylesheet.
787-
2. Importing the stylesheets from your application.
786+
1. Using the shell's stylesheet, which includes Paragon's core stylesheet.
787+
2. Using the stylesheets from your application, if any.
788788

789-
You must then import this new stylesheet into your `site.config` file:
789+
For example:
790+
791+
```
792+
@use "@openedx/frontend-base/shell/app.scss";
793+
@use "sass/style";
794+
```
795+
796+
You must then import this file from your `site.config.dev.tsx` file:
790797

791798
```diff
792799
+ import './app.scss';
@@ -816,7 +823,7 @@ Convert @import to @use in SCSS files
816823

817824
@import is deprecated in the most recent versions of SASS. It must be converted to @use.
818825

819-
If still importing Paragon SCSS variables, you will find that they, in particular, are likely to result in errors when building the app in webpack. The app should be migrated to use CSS variables from Paragon 23, as per [the corresponding howto](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3770744958/Migrating+MFEs+to+Paragon+design+tokens+and+CSS+variables). These do not need to be @used by the app, as they should be loaded into the site HTML by default.
826+
If still importing Paragon SCSS variables, you will find that they, in particular, are likely to result in errors when building the app in webpack. The app should be migrated to use CSS variables from Paragon 23, as per [the corresponding howto](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3770744958/Migrating+MFEs+to+Paragon+design+tokens+and+CSS+variables).
820827

821828
Changes to i18n
822829
===============

0 commit comments

Comments
 (0)