README
loop-modules
Shared modules for the Loop product suite.
- Integrating SASS
BUILDING
- Run
npm run build
to 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
SASS
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
Web use
src/client/css/main.scss
/* 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:
src/client/css/tools/_index.scss
@import 'loop-modules/assets/sass/global/variables';
@import 'loop-modules/assets/sass/web/tools/mixins';
Then I import this into my components:
src/client/app/main/main.component.scss
@import '../../css/tools/index';