@teammaestro/loop-modules

Shared modules for the Loop product suite.

Usage no npm install needed!

<script type="module">
  import teammaestroLoopModules from 'https://cdn.skypack.dev/@teammaestro/loop-modules';
</script>

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';