Question

我目前正在尝试将静态离线字体集成到我的Webpack构建过程中。我使用vue-webpack构建过程作为构建过程的基础。

我找到了这个很好的库google-fonts-webpack-plugin，它提供了所有的字体文件和一个CSS文件。

我将它集成到现有的vue-webpack prod版本中，如下所示：

plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
  'process.env': env
  }),

  new GoogleFontsPlugin({
    fonts: [
      { family: 'Roboto', variants: [ '300', '400', '400italic', '500' ] }
    ]
  }),

  new webpack.optimize.UglifyJsPlugin({
  [ ... ]

google-fonts-webpack-plugin的结果文件似乎完全独立于其他常规生成的文件。这意味着，生成的fonts.css不是版本化CSS文件的一部分。在dist/文件夹中，显示fonts.css和目录fonts/，但它们甚至不在static/文件夹中。

如何将此库挂钩到vue-webpack的常规CSS /字体构建过程中，以便fonts.css最终出现在版本化的CSS文件和static/fonts目录中的字体文件中？

Answer 1

我认为你不会使用这个插件来使用Vue webpack构建。您可以添加一些配置以将字体和css放在所需的位置，例如：

new GoogleFontsPlugin({
  fonts: [
    { family: 'Roboto', variants: [ '300' ] }
  ],
  path: "../src/assets/",
  filename: "../src/assets/fonts.css"
}),

但是插件的编写方式，在文件加载器尝试访问css文件并抛出错误之前，您无法获取文件。您也可以将字体直接放在关闭的./dist文件夹中，但插件会在index.html中使用绝对路径（即/dist/static/fonts/）写入路径，并且没有'似乎是一种在不改变源代码的情况下改变它的方法。

在运行build之前，您可能会更好运使用Gulp之类的东西将文件和css下载到assets文件夹中。（也许：https://www.npmjs.com/package/gulp-google-webfonts）

Answer 2

您可以使用npm模块typeface-roboto，然后从该模块导入index.css。

Answer 3

使用＆＃34; webpack＆＃34;：＆＃34; ^ 3.10.0＆＃34; 。 / node v8.9.3，＆＃34; vue＆＃34;：＆＃34; ^ 2.5.13＆＃34; 和＆＃34; google-fonts-webpack-plugin＆＃34;：＆＃34; ^ 0.4.4＆＃34;，

webpack.dev.conf.js

  plugins: [
  ...
        // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
    new GoogleFontsPlugin({
            fonts: [
                { family: "Source Sans Pro" },
                { family: "Lato", variants: ["400", "300", "700", "900"] },
                { family: "Raleway", variants: ["400", "500", "600"] }
      ]
    })

并在main.css中，按原样使用font-family ...

        .header-text {
          font-family: Raleway;
          font-weight: 300;
          text-transform: capitalize;
          font-size: 35px;
          color: rgb(124, 112, 102);
          letter-spacing: 2px;
          margin-bottom: 30px;
          margin-left: 5px;
          margin-top: 0px;
        }

现在在分段，生产分发中，需要在

中添加outputDir

webpack.prod.conf.js

        new GoogleFontsPlugin({
                fonts: [
                    { family: "Source Sans Pro" },
                    { family: "Lato", variants: ["400", "300", "700", "900"] },
                    { family: "Raleway", variants: ["400", "500", "600"] }
          ],
          outputDir: "dist/fonts"
        }),

文件结构adter build将是以下

静态文件夹旁边的

，你得到：

包含googlefonts
带有@ font-face {font-family ....和相对于字体文件夹的网址
a fonts.css.map

整合＆＃34; google-fonts-webpack-plugin＆＃34;进入＆＃34; vue-webpack＆＃34;构建过程

3 个答案: