cityfurniture-scss

Setup environment locally

1. Run yarn to install dependencies
2. Run yarn build to check everything is working fine

Documentation

Read docs http://digital-scss.s3-website-us-west-2.amazonaws.com/

Publishing a new version

1. prepublish changes npm run prepublish
2. commit updates
3. npm run release -- --release-as major
4. commit new version - package.json
5. npm publish - need to have credentials

(Remote) Install the package inside a project

• install the package using npm: npm install @city-furniture/cityfurniture-scss --save
• install the package using yarn: yarn add @city-furniture/cityfurniture-scss

(Locally) Install the package inside a project

• To work with the scss package without installing it, we must clone the project cityfurniture-scss, install the packages with npm install and run the command npm link.
• This will take the package and create a symbolic link in the npm global folder to it.
• After this, in order to use the local package inside project we need to open the project into a terminal and run the command npm link @city-furniture/cityfurniture-scss and the dependency is created between the projects.

Importing the package

• We can use the package inside any javascript file from project by importing it with: import '@city-furniture/cityfurniture-scss/scss/main.scss’

• or other importing methods like - inside scss files:

    @import '~@city-furniture/cityfurniture-scss/scss/main';

    @import '~@city-furniture/cityfurniture-scss/dist/main.min.css';

Override the variables:

• inside a scss file from the project we write the following:

$font-weight--thin: 120px;

@import '~@city-furniture/cityfurniture-scss/scss/main';

Resources:

• compile and minify a sass project: https://www.jamesedwards.name/npm-compile-sass
• overriding variables inside scss files: https://medium.com/@bajena3/a-story-about-overriding-scss-variables-and-the-default-keyword-eace1de34631
• creating a step-by-step npm package: https://dev.to/therealdanvega/creating-your-first-npm-package-2ehf
• theming with scss: https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1