Stylesheets & SCSS compilation

Any syntax error within any of the SCSS files being compiled will result in an error during compilation and a new/updated CSS file will not be created/generated.

When making changes to your theme's SCSS files, you must therefore be careful not to introduce an error that will cause compilation to fail, e.g.:

• The use of an undeclared variable
• Incorrectly declaring or referencing variables
• Incorrect use of SCSS syntax

If changes to your theme's SCSS files are failing to be reflected in your theme's CSS file, it's likely that this is a result of a compilation error.

All ShopWired themes provide a mechanism for you to view compilation errors in the browser console.

To check for compilation errors:

1. Navigate to the theme editor
2. Navigate to Theme settings
3. Open the Advanced options settings group
4. Select the Show SCSS compilation errors in the browser console setting and save your changes
5. In a new browser window, open the code editor and open the theme.scss file, make a small unnoticeable change (such as adding a space to the file), and save it. This will trigger compilation
   • If you already have the code editor open, you must refresh the page
6. Open the browser console and inspect the warnings, e.g.

Important notes:

• Line numbers in files may be slightly inaccurate
• If a compilation error occurs at the start or end of an SCSS file, the SCSS file reported in the browser warnings may be inaccurate
• Check the file above or beneath the reported file (inspect the theme.scss to see the order of compilation)

You can enable source maps in the theme editor:

1. Navigate to the theme customiser
2. Navigate to Theme settings
3. Open the Advanced options settings group
4. Select the Enable source maps setting and save your changes

Once available, you can use the inspect element to locate which SCSS file within your theme files contains a specific selector.