Work on CSS

Start Storybook and Webpack for CSS Work

1. Make sure sourcemaps are visible on local. Sourcemaps allow you to see the correct .scss file in inspector.
2. Go to /admin/config/development/performance
3. Turn off CSS/JS aggregation for your local environment. Aggregation strips out comments, which is how sourcemaps get added.

4. Do NOT export and commit this change.

5. In terminal, go to the theme folder:
   cd /web/themes/custom/npl/

6. Make sure there is a .nvmrc folder in /cusom/npl.
   ls -la

7. Run command to switch to the current node version needed:
   nvm use

8. Run command to ensure emulsify stuff installed:
   npm install

9. Start the listener before updating scss files: npm run develop

10. Make changes to scss files.

Stop Storybook and Webpack and Commit Work

1. When you are done developing, hit ctrl-C to turn off the SCSS watch process.
   control + C

2. Check status:
   git status -s

3. Reset all files except the specific files you made changes to - e.g. the SCSS files. Reset any js or css files that were generated. git checkout -- [file]

4. Final step is to then run a build process. This will produce a smaller set of changed files. npm run build

5. Commit the SCSS and the new rendered CSS file. Reset all the other files that were not changed.

6. Commit the altered scss files.
7. Commit the compiled css files last in a separate commit.

8. Do not commit the other compiled files. For any file .

9. Verify your changes are still visible on the affected web page.

10. Push up your changes for testing.

At some point, we can work on some cleanup so we aren't generating all these unknown changes but for now, the process above should work fine.

Let us know if you want a call to walk through this. It can be a bit confusing.