dist | ||
docs | ||
sass | ||
.editorconfig | ||
.gitignore | ||
.npmrc | ||
LICENSE | ||
package.json | ||
README.md | ||
yarn.lock |
@lbry/components
Styling for shared components across LBRY properties
Installation
$ npm i @lbry/components sass -D
We recommend using this module with Dart Sass for its' focus on speed and low dependency count.
If you are using @lbry/components
, you can safely remove @lbry/color if you've already included it separately (this module includes it by default).
Demo
https://lbryio.github.io/components
Usage
Your main Sass file:
@charset "utf-8";
@import "@lbry/components/sass/";
// ...your other Sass imports
In your watch scripts for Sass files, ensure you load the node_modules
path in order to import
this module in your project without silly prefixes like ../../../
. What a mess.
Example package.json
scripts section:
"scripts": {
...,
"sass:dev": "sass --load-path=node_modules --watch app/sass:app/dist --style compressed",
"sass:prod": "sass --load-path=node_modules --update app/sass:app/dist --style compressed",
...
}
They are nearly identical, save for --watch
and --update
. Please refer to the Dart Sass README for assistance on how to integrate it with your project. The above example is taken from the lbry.tech
repo.
Note
To use with Webpack, you have to make use of the tilde character when referencing a file inside your node_modules
folder. Like so:
@import "~@lbry/components/sass/";
License
BSD 3-Clause Copyright © LBRY Inc.