我的公司中有一个共享包,它具有bootstrap作为依赖关系,结构如下所示:
+ - 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/
我的问题是:处理我的库的依赖路径的正确方法是什么?
假设my-library
生活在node-modules
,使用--include-path
选项引用./node_modules/
,这将使node-sass
在编译scss文件时找到引导程序。
将--include-path
选项添加到package.json
中的命令...
"scripts": {
"dev": "node-sass --include-path ./node_modules/ sass/index.scss -o --watch --output css"
},