0

Created( ng build my-lib) 一个带有全局 scss 的 angular lib，然后将其捆绑到一个文件中并复制到 lib 的文件夹中。

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 得到解决

解决方案是什么？

4

1 回答 1

1

当我通过 Angular-Cli 构建/服务我的项目时，它用来处理 scss 的插件/加载器没有解决相对（与库本身） URL（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",
于 2019-01-10T06:55:38.767 回答