Shared modules for the Loop product suite.
- Integrating SASS
npm run buildto start the testing and build process.
- Output is generated into the /dist folder.
- package.json main should point to /dist/index.js to install in other packages
- Failed tests will not result in a build
All of our shared SASS files are located inside of this repo inside of the
assets/sass directory. These SASS files are broken up into 2 seperate groups, global vs web.
- Global SASS files are more often shared variables and helper classes that can be used across web and native apps.
- Web SASS files are web specific styles that are going to be shared across our various loop web applications (accounts and loop for now)
In order to pull these files into your projects, we have created segmented barrel files:
- Global/variables.scss - This barrel contains all the sass variables
- Global/helpers.scss - This barrel contains all the sass help classes that can be shared
- Web/index.scss - This barrel contains all the web styles as well as the bootstrap dependency (order matters here)
Note: All the variables are overwritable
/* Loop Module */ @import 'loop-modules/assets/sass/web/index';
For referencing any of the variables inside your component sass files:
I just created a barrel for my barrels:
@import 'loop-modules/assets/sass/global/variables'; @import 'loop-modules/assets/sass/web/tools/mixins';
Then I import this into my components: