Webpack：为 SASS 中的@font-face 覆盖 url（字形）

Question

我导入了 "glyphicons-halflings": "1.9.0"，其中不包含实际字体。因此，字体相对于我的应用程序存储在 app/assets/fonts.

中

我正在处理这样的错误：

ERROR in ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in C:\work\myapp\src\MyApp.Web\app\scss
@ ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss 6:168498-168550 6:168573-168625

对我来说，这好像 node_modules/glyphicons-halflings/scss/glyphicons-halflings/_glyphicons-halflings.scss 中定义的 url 没有被正确覆盖

_glyphicons-halflings.scss定义

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

我自己app/scss/_font.scss定义

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../assets/fonts/glyphicons/glyphicons-halflings-regular.eot');
    src: url('../assets/fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../assets/fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'),
         url('../assets/fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../assets/fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

这两者之间的唯一区别是 url。我定义了 _font.scss（或者更确切地说，application.scss）的相对路径，但是 webpack 无法解析 glyphicons-halflings 模块中定义的 url。

这两个文件都导入到 app/scss/application.scss:

@import "variables";
@import "mixins";
@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~glyphicons-halflings/scss/glyphicons-halflings";
@import "bootstrap-override";
@import "libs-override";

@import "font";

我是这样设置 webpack 的： webpack.common.js

module: {
    loaders: [
        {
            test: /\.ts$/,
            include: helpers.root('app'),
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/, // mostly angular templates
            include: helpers.root('app'),
            loader: 'html'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?|$)/,
            include: helpers.root('app'),
            loader: 'file?name=[path][name].[hash].[ext]'             
        },
        {
            test: /\.scss$/,
            include: helpers.root('app'),
            loaders: ['style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap']
        },
        {
            test: /\.css$/,
            include: helpers.root('app'),
            loader: 'to-string!css!resolve-url'
        }
    ]
},

供参考，我的文件夹结构是这样的：

+-- app
|    +-- assets
|        +-- fonts
|            +-- font-awesome
|                +-- FontAwesome.otf
|                +-- ...
|            +-- glyphicons
|                +-- ...
|            +-- ...
|        +-- icon
|            +-- ...
|        +-- ...
|   +-- sass
|       +-- _font.css
|       +-- application.scss
|       +-- ...
|   +-- ...
+-- appdist (later for server-side, if ever)
+-- node_modules
+-- ...
+-- wwwroot
    +-- dist
        +-- ...webpack bundled content goes here...

TL;DR package glyphicons-halflings 1.9.0 定义了一个 @font-face，我无法覆盖它（因为 url 是错误的）。所有 SASS，webpack 加载器管道是 'style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap'

Answer 1

我已经停止使用 glyphicons-halflings 软件包。我改为复制我自己的代码旁边的内容并更改路径。

我的猜测是 webpack sass-loader 分别评估每个 require(…) - 而 glyphicions-halflings 包没有通过评估。

Webpack：为 SASS 中的@font-face 覆盖 url（字形）

Webpack: overwriting url for @font-face in SASS (Glyphicons)

css

sass

relative-url

glyphicons

webpack