Webpack sass-loader,css-loader 在 scss 文件中与 font-face 中断

Posted

技术标签:

【中文标题】Webpack sass-loader,css-loader 在 scss 文件中与 font-face 中断【英文标题】:Webpack sass-loader, css-loader breaks with font-face in scss file 【发布时间】:2017-05-29 07:42:18 【问题描述】:

这是我的样式加载器配置:

loaders: 
  test: /\.scss$/,
  loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']

在我的源 scss 文件中,我有这个:

@font-face 
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?-cvpazo');
  src: url('../fonts/icomoon.eot?#iefix-cvpazo') format('embedded-opentype'),
       url('../fonts/icomoon.woff?-cvpazo') format('woff'),
       url('../fonts/icomoon.ttf?-cvpazo') format('truetype'),
       url('../fonts/icomoon.svg?-cvpazo#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;

我收到此错误:

模块解析失败:/client/fonts/icomoon.svg?-cvpazo 意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。

Webpack 无法加载 font-face 声明,我需要在这里做什么才能让 font-face 工作?

【问题讨论】:

你试过在 sass-loader 之前使用你的 resolve-url-loader 吗?我遇到了类似的问题,希望您能找到解决方法! 我确实尝试过,但它没有解决这个问题,resolve-url-loader 将处理传递给url 的路径,但它不会解决这个问题。现在很清楚 sass-loader 和 css-loader 无法处理 @font-face。这对我来说是不直观的。我想我将不得不使用单独的字体加载器。我会尝试并在我这样做时报告! 【参考方案1】:

也许你需要添加文件加载器来加载字体


    test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
    use: ['file-loader']

【讨论】:

以上是关于Webpack sass-loader,css-loader 在 scss 文件中与 font-face 中断的主要内容,如果未能解决你的问题,请参考以下文章

css-loader,sass-loader 不工作 webpack 2

带有 webpack 和 sass-loader 的 Susy 网格

Webpack 中带有 sass-loader 和 postcss-loader 的 sourceMap

实现 sass-loader webpack 时出错

图片不显示在生产版本中,仅在开发中(webpack/sass-loader)

sass-loader 不适用于 webpack + react + grommet