使用 angular-cli 创建的 angular 库中的 scss 编译问题
scss compilation issue in angular lib created using angular-cli
创建(ng build my-lib
)一个具有全局 scss 的 angular 库,然后捆绑到一个文件中并复制到库的文件夹中。
dist-lib/my-lib/lib/sass/my-lib.scss
现在 my-lib.scss 导入一些资源,例如
@font-face {
font-family:"Roboto Regular";
font-weight:normal;
font-style:normal;
src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"), /* IE9 Compat Modes */
url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers */
url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
}
我将资源文件夹复制到我的库中的位置
dist-lib/my-lib/lib/resources
/fonts
/ roboto-regular/Roboto-Regular.eot
现在在我的应用程序的 styles.scss 文件中,我正在导入 my-lib.scss 文件,如下所示
@import "../dist-lib/my-lib/lib/sass/my-lib";
但这显示错误
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: D:\SK\Study\Angular\AngularLib\MyLib\dist-lib\my-lib\lib\sass\my-lib.scss:10:9:
Can't resolve '../resources/fonts/roboto-regular/Roboto-Regular.woff' in 'D:\SK\Study\Angular\AngularLib\MyLib\src'
8 | font-style:normal;
9 | src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"), /* IE9 Compat Modes */
> 10 | url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers */
| ^
11 | url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype");
我猜资源是相对于文件 src/styles.scss 而不是相对于 dist-lib/my-lib/lib/sass/my-lib.scss
解决这个问题的方法是什么?
因为我是 building/serving 我的项目,通过 Angular-Cli,所以它用来处理 scss 的 plugins/loaders 没有解决相对的问题(对库本身)网址 (url(../)
)。
为了解决这个问题,我创建了 fonts.css 而不是我随库一起提供的 fonts.scss。最终用户还必须导入此 fonts.css。
现在可以使用了,虽然这听起来不是一个好的解决方案,但直到那时我才得到这个解决方法。
更新:提供font.scss
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-light/ProximaNova-Light.eot');
src: url('../assets/fonts/proxima-nova-light/ProximaNova-Light.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.woff') format('woff'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
font-weight: 300;
}
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.eot');
src: url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.woff') format('woff'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
font-weight: 400;
}
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.eot');
src: url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.woff') format('woff'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.svg#ProximaNova-Medium') format('svg');
font-weight: 500;
}
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.eot');
src: url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.woff') format('woff'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
font-weight: 700;
}
因为我使用了 font.scss,它将被编译为 font.css 文件作为使用此脚本的 lib 构建过程
"build-lib-fonts": "node-sass --include-path scss ./projects/project/src/lib/styles/_fonts.scss ./dist-lib/project/styles/fonts.css",
创建(ng build my-lib
)一个具有全局 scss 的 angular 库,然后捆绑到一个文件中并复制到库的文件夹中。
dist-lib/my-lib/lib/sass/my-lib.scss
现在 my-lib.scss 导入一些资源,例如
@font-face {
font-family:"Roboto Regular";
font-weight:normal;
font-style:normal;
src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"), /* IE9 Compat Modes */
url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers */
url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
}
我将资源文件夹复制到我的库中的位置
dist-lib/my-lib/lib/resources
/fonts
/ roboto-regular/Roboto-Regular.eot
现在在我的应用程序的 styles.scss 文件中,我正在导入 my-lib.scss 文件,如下所示
@import "../dist-lib/my-lib/lib/sass/my-lib";
但这显示错误
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: D:\SK\Study\Angular\AngularLib\MyLib\dist-lib\my-lib\lib\sass\my-lib.scss:10:9:
Can't resolve '../resources/fonts/roboto-regular/Roboto-Regular.woff' in 'D:\SK\Study\Angular\AngularLib\MyLib\src'
8 | font-style:normal;
9 | src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"), /* IE9 Compat Modes */
> 10 | url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers */
| ^
11 | url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype");
我猜资源是相对于文件 src/styles.scss 而不是相对于 dist-lib/my-lib/lib/sass/my-lib.scss
解决这个问题的方法是什么?
因为我是 building/serving 我的项目,通过 Angular-Cli,所以它用来处理 scss 的 plugins/loaders 没有解决相对的问题(对库本身)网址 (url(../)
)。
为了解决这个问题,我创建了 fonts.css 而不是我随库一起提供的 fonts.scss。最终用户还必须导入此 fonts.css。
现在可以使用了,虽然这听起来不是一个好的解决方案,但直到那时我才得到这个解决方法。
更新:提供font.scss
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-light/ProximaNova-Light.eot');
src: url('../assets/fonts/proxima-nova-light/ProximaNova-Light.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.woff') format('woff'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-light/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
font-weight: 300;
}
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.eot');
src: url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.woff') format('woff'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-regular/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
font-weight: 400;
}
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.eot');
src: url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.woff') format('woff'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-medium/ProximaNova-Medium.svg#ProximaNova-Medium') format('svg');
font-weight: 500;
}
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.eot');
src: url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.woff2') format('woff2'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.woff') format('woff'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.ttf') format('truetype'),
url('../assets/fonts/proxima-nova-bold/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
font-weight: 700;
}
因为我使用了 font.scss,它将被编译为 font.css 文件作为使用此脚本的 lib 构建过程
"build-lib-fonts": "node-sass --include-path scss ./projects/project/src/lib/styles/_fonts.scss ./dist-lib/project/styles/fonts.css",