Handle path from dependency in my entrerprise shared npm package

user_2593900 0
Viewed 71

I have a shared package in my company that have bootstrap as dependency and the structure looks like this:

+ - my-library
    + - node_modules
      + ...
      + bootstrap
        + scss
          --_mixins.scss
          --_functions.scss
          --_variables.scss
          --_buttons.scss
    +-scss
      -- _buttons.scss
      -- main.scss 
    package.json

The idea of this library it is that will be consumed among a lot of teams. The main files of my library:

package.json

{
  "name": "my-library",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "node-sass sass/index.scss --watch --output css"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.1.2"
  },
  "devDependencies": {
    "node-sass": "^4.9.2"
  }
}

scss/_buttons.scss

@import "./node_modules/bootstrap/scss/_mixins";
@import "./node_modules/bootstrap/scss/_functions";
@import "./node_modules/bootstrap/scss/_variables";
@import "./node_modules/bootstrap/scss/_buttons";

... THE CSS RULES FOR THE BUTTONS OF THE COMPANY ...

scss/main.scss

@import "_buttons";
... THE CSS RULES FOR GENERAL STYLES OF THE COMPANY ...

The problem it is when another project consumes my library. When someone do npm install --save my-library the paths defined for get bootstrap are different because bootstrap it is one folder backwards now.

+ - consumer-project

  + - node_modules
     + ...
     + bootstrap
       + scss
         --_mixins.scss
         --_functions.scss
         --_variables.scss
         --_buttons.scss
      + - my-library
        +-scss
          -- _buttons.scss
          -- main.scss 
        package.json

If the consumer project imports main.scss file, this will be fail because now the path for bootstrap in _buttons.scss file now is ../node_modules/bootstrap/

My question is: What is the right way for handle the paths of the dependencies of my library?

bootstrap-4 npm sass shared-libraries
1 Answers

Assuming the my-library lives in node-modules, use the --include-path option to reference ./node_modules/ which will enable node-sass to find bootstrap when it compiles the scss files.

Add the --include-path option to the command in package.json...

"scripts": {
    "dev": "node-sass --include-path ./node_modules/ sass/index.scss -o --watch --output css"
 },
user_1714560
Related