Importing Sass Files into Application Entry Points

TL;DR

Import the new _glowy.scss Sass file into the entry point Sass files for your applications to ensure your styles are incorporated into the master Sass file.

How to Import the New Sass File

To integrate the new Sass styles effectively, follow these steps:

1. Update the Shopping Application: Open your local workspace directory and navigate to the file Modules/Shopping@sc-<release>/shopping.scss. Add the following import statement to include the new Sass file:

   cssCopy

   @import "../Glowy@custom-1.0.0/Sass/glowy";

2. Modify Homepage Styles: Next, you'll want to update the homepage styles so that they utilize the new glowing effects. Open Modules/Home@sc-<release>/Sass/_home.scss and add:

   cssCopy

   .home-banner-prices-image {
     @extend .glowy;
     width: 90%;
     margin: 5%;
   }

3. Restart the Local Server: After saving your changes, it's crucial to restart your local server since new files have been added. Once the server is running again, refresh the homepage to view the applied changes.

Once completed, you should see the banner image outlined in a glowing color, displaying the new styles successfully.

Best Practices

• Always back up your Sass files before making changes to avoid loss of work.
• Ensure the file paths in the import statements are correct to prevent errors during compilation.

Troubleshooting

• If you do not see changes after refreshing, check the console for errors indicating problems with Sass compilation or file paths.

Key Takeaways

• Import new Sass files into application entry points to enhance styles.
• Modify specific Sass files to integrate glowing styles effectively.
• Remember to restart your local server after adding new files for changes to take effect.