我的公司中有一个共享包,它具有bootstrap作为依赖关系,结构如下所示: + - my-library + - node_modules + ... + bootstrap + scss --_mixins.scss --_functions.scss --_variables.scss --_buttons.scss +-scss -- _buttons.scss
+ - my-library + - node_modules + ... + bootstrap + scss --_mixins.scss --_functions.scss --_variables.scss --_buttons.scss +-scss -- _buttons.scss -- main.scss package.json
这个库的想法将被许多团队消费.
我的图书馆的主要文件:
的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 ...
当另一个项目消耗我的库时,问题就出现了.当有人做npm install –save my-library时,为get bootstrap定义的路径是不同的,因为bootstrap现在是一个向后的文件夹.
+ - consumer-project + - node_modules + ... + bootstrap + scss --_mixins.scss --_functions.scss --_variables.scss --_buttons.scss + - my-library +-scss -- _buttons.scss -- main.scss package.json
如果使用者项目导入main.scss文件,这将失败,因为现在_buttons.scss文件中的bootstrap路径现在是../node_modules/bootstrap/
我的问题是:
处理库的依赖路径的正确方法是什么?
将–include-path选项添加到package.json中的命令…
"scripts": { "dev": "node-sass --include-path ./node_modules/ sass/index.scss -o --watch --output css" },