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与file-loader或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中的字体和图像，请使用simon04's answer。

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

css-loader

请参阅https://github.com/webpack/css-loader#options-1

无法使用webpack加载css-font（svg，eot，woff，woff2和ttf）

2 个答案: