无法使用 webpack 加载 css-字体（svg、eot、woff、woff2 和 ttf）

Question

我想在我的项目中包含此字体：

@font-face {
  font-family: 'bikeshop';
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833');
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') format('embedded-opentype'),
       url('/src/styles/bikeFont/font/bikeshop.woff2?37006833') format('woff2'),
       url('/src/styles/bikeFont/font/bikeshop.woff?37006833') format('woff'),
       url('/src/styles/bikeFont/font/bikeshop.ttf?37006833') format('truetype'),
       url('/src/styles/bikeFont/font/bikeshop.svg?37006833#bikeshop') format('svg');
  font-weight: normal;
  font-style: normal;
}

通过 "npm run server" 编译工作正常，但字体图标未显示在网站上

控制台记录这些错误：

GET "domain"/src/styles/bikeFont/font/bikeshop.woff2?37006833   
File: shared_styles_host.js:90   
GET "domain"/src/styles/bikeFont/font/bikeshop.woff?37006833  
File: src/styles/bikeFont/font/bikeshop.woff?37006833:1 
GET "domain"/src/styles/bikeFont/font/bikeshop.ttf?37006833  
File: src/styles/bikeFont/font/bikeshop.ttf?37006833:1

我是否需要为此在我的 webpack.common.js 中包含一个新的加载器？

编辑：

我在我的 scss 文件中加载 @font-face 并使用这个 webpack 规则

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
},

Answer 1

使用css-loader together with file-loader or url-loader。例如：

{
  module: {
    rules: [{
      test: /\.css$/,
      loader: 'css-loader'
    }, {
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }]
  }
}

Answer 2

如果您希望 webpack 处理 css 中的字体和图像，请使用。

如果你只想为你使用 webpack css 并忽略你 css 中的所有 url 路径（你将自己处理引用的资产）你可以设置 url css-loader 上的 false 选项：

{
    test: /\.css$/,
    use: {
        loader: 'css-loader',
        options: { url: false }
    }
}

见https://github.com/webpack/css-loader#options-1

无法使用 webpack 加载 css-字体（svg、eot、woff、woff2 和 ttf）

Can't load css-font (svg,eot,woff,woff2 and ttf) with webpack

css

svg

webpack

webpack-2

angular