Store Locator Plus® uses SCSS files compiled by the Sass application to generate the custom CSS files for the application. To process these files you’ll need to have a builder application, such as Webpack via Node, or an IDE with a file watcher in place. Proper generation of the CSS compilations is critical to creating a proper application interface.
Eventually our process will move to a managed script to build the application stack as we move toward JavaScript interfaces, such as React, as a core of the user experience. In the meantime the IDE file watcher approach is in place.
PHPStorm File Watchers
You’ll need to setup file watchers to monitor all SCSS files in the application stack. This involves setting up file scopes to monitor all Store Locator Plus® code directories for SCSS file type changes.
Add a SCSS File Watcher
File Type: SCSS Stylesheet
This will only look at .scss files within the selected scop
Scope: “All SLP Code” (see below)
Arguments: –style compressed $FileName$:$FileNameWithoutExtension$.min.css
This will output a minified CSS file that matches the name of the parent SCSS file with .min.css as the extension.
Track Only Root Files: checked
This ensures the included children .scss files are not compiled and minified
Output paths to refresh: $FileNameWithoutExtension$.min.css:$FileNameWithoutExtension$.min.css.map
The .min.css and .min.css.map files that are created by this process will cause the IDE to refresh the file list for naviation.
Setting up the “All SLP Code” Scope
In PHPStorm the scope provides a filtered list of files to act upon. This ensures processes like a file watcher, or even a “global find” operation only looks out the SLP code files and not other items that might be in the IDE for debugging such as WordPress core or node libraries.
Create a new scope called “All SLP Code”
Assuming you’ve cloned your code repositories to match the baseline structure, set the file pattern as follows:
(file[MySLP_Dashboard]:myslp-signup//*||file[MySLP_Dashboard]:premier-services//*||file[MySLP_Dashboard]:slp-experience//*||file[MySLP_Dashboard]:slp-performance//*||file[MySLP_Dashboard]:slp-power//*||file[MySLP_Dashboard]:slp-premier//*||file[MySLP_Dashboard]:store-locator-le//*||file[MySLP_Dashboard]:wp-content/plugins/myslp-customer-maintenance//*||file[MySLP_Dashboard]:wp-content/plugins/myslp-customer-profile//*||file[MySLP_Dashboard]:wp-content/plugins/myslp-email-settings//*||file[MySLP_Dashboard]:wp-content/plugins/site-architect//*||file[MySLP_Dashboard]:wp-content/plugins/myslp-history-logger//*||file[MySLP_Dashboard]:front-end//*||file[MySLP_Dashboard]:mu-plugins//*||file[MySLP_Dashboard]:mu-plugins/myslp-payments//*||file[MySLP_Dashboard]:mu-plugins/store-locator-plus-myslp-dashboard//*)&&!file[MySLP_Dashboard]:wp-content/plugins/site-architect/extensions/stripe/stripe-lib//*Post image from Pixabay: https://pixabay.com/photos/colorful-pencils-submerged-2137080/