使用 webpack 和 postcss-loader 导入字体很棒

Posted 2023-03-06

【中文标题】使用 webpack 和 postcss-loader 导入字体很棒

【英文标题】：Import font awesome with webpack and postcss-loader

【发布时间】：2018-07-14 01:04:33

【问题描述】：

我正在尝试更新我的 webpack 构建以利用 postcss 和 postcss-loader。但是我在加载字体、图像等时遇到问题。

例如尝试导入字体真棒。

这是我在 postcss 之前的设置：

css:

@import "~font-awesome/css/font-awesome.min.css";

webpack.config：

  ...
  module: 
    rules: [
      test: /\.css$/,
      use: ExtractTextPlugin.extract(
        fallback: 'style-loader',
        use: 'css-loader'
      )
    ,
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader?name=fonts/[name].[ext]'
    ,
      test: /\.(png|jpg)$/,
      loader: 'file-loader?name=images/[name].[ext]'
    ,
      test: /\.html$/, loader: 'raw-loader'
    ]
  
  ...

试图移动到这里：

@import 'font-awesome'

带有 postcss 的 webpack：

  ...
  module: 
    rules: [
      test: /\.css$/,
      use: ExtractTextPlugin.extract(
        fallback: 'style-loader',
        use: [
          loader: 'css-loader',
          options: 
            importLoaders: 1
          
        ,
          loader: 'postcss-loader',
          options: 
            ident: 'postcss',
            sourceMap: true,
            plugins: [require('postcss-import')()]
          
        ]
      )
    ,
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader?name=fonts/[name].[ext]'
    ,
      test: /\.(png|jpg)$/,
      loader: 'file-loader?name=images/[name].[ext]'
    ,
      test: /\.html$/, loader: 'raw-loader'
    ]
  
  ...

但是当我这样做时，我会收到这样的错误：

./style.css 中的错误模块构建失败：ModuleNotFoundError: Module 未找到：错误：无法解析“../fonts/fontawesome-webfont.eot” '/test-project/public'

我也尝试了其他一些库（即 bootstrap、leaflet）并且遇到了同样的问题。

【参考方案1】：

css-loader 似乎无法解析到font-awesome/fonts 目录的相对 url 路径。

您需要在您的css-loader 选项中添加一个alias，就像这样。

use: [
  loader: 'css-loader',
  options: 
    importLoaders: 1,
    alias: 
      "../fonts": "font-awesome/fonts"
    
  

我在一个示例项目中对此进行了测试，它似乎编译成功。

$ ./node_modules/.bin/webpack
Hash: 05687ac67950e58e8485
Version: webpack 3.10.0
Time: 996ms
                          Asset     Size  Chunks                    Chunk Names
  fonts/fontawesome-webfont.eot   166 kB          [emitted]
fonts/fontawesome-webfont.woff2  77.2 kB          [emitted]
 fonts/fontawesome-webfont.woff    98 kB          [emitted]
  fonts/fontawesome-webfont.ttf   166 kB          [emitted]
  fonts/fontawesome-webfont.svg   444 kB          [emitted]  [big]
                 ./dist/main.js  2.63 kB       0  [emitted]         main
                     styles.css  38.1 kB       0  [emitted]         main
   [0] ./main.js 43 bytes 0 [built]
   [1] ./main.css 41 bytes 0 [built]
   [2] ../node_modules/css-loader?"importLoaders":1,"alias":"../fonts":"font-awesome/fonts"!../node_modules/resolve-url-loader!../node_modules/postcss-loader/lib?"ident":"postcss"!./main.css 43.7 kB [built]
    + 10 hidden modules
Child extract-text-webpack-plugin ../../../../Joshua Barnett\Projects\blah\node_modules\extract-text-webpack-plugin\dist ../../../../Joshua Barnett\Projects\blah\node_modules\css-loader\index.js??ref--0-2!../../../../Joshua Barnett\Projects\blah\node_modules\resolve-url-loader\index.js!../../../../Joshua Barnett\Projects\blah\node_modules\postcss-loader\lib\index.js??postcss!../../../../Joshua Barnett\Projects\blah\js\main.css:
     5 assets
       [0] ../node_modules/css-loader?"importLoaders":1,"alias":"../fonts":"font-awesome/fonts"!../node_modules/resolve-url-loader!../node_modules/postcss-loader/lib?"ident":"postcss"!./main.css 43.7 kB 0 [built]
        + 8 hidden modules

此外，如果您还使用使用 ../fonts 相对路径的项目，您可能需要更具体地使用别名。

【讨论】：

为什么css-loader只有在我使用postcss-loader时才会出现问题？那时我想我没有看到使用 postcss-loader 的意义。

我猜它也失去了对相对路径的相对位置的引用。我使用 PostCSS 来auto prefix 我输出的 CSS，所以它会自动为旧版浏览器填充。这解决了您的问题吗？

似乎不再支持别名

别名现已移至配置文件中的***resolve 块：v4.webpack.js.org/loaders/css-loader/#alias

【参考方案2】：

这个 webpack 配置为我解决了问题：

const rules = [
  test: /\.css$/,
  use: [
    'style-loader',
    
      loader: 'css-loader',
      options: 
        importLoaders: 1,
        sourceMap: true,
      
    ,
   'resolve-url-loader',
    
      loader: 'postcss-loader',
      options: 
        sourceMap: true,
        ident: 'postcss',
        plugins: () => [],
      
    
  ]
, 
  test: /\.(png|woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000',
]