2

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

我发现了这个不错的库google-fonts-webpack-plugin，它提供了所有的字体文件和一个 CSS 文件。

我将它集成到现有的vue-webpack产品构建中，如下所示：

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/文件夹中的其他所有内容一样。

我怎样才能将这个库挂钩到常规的 CSS/字体构建过程中vue-webpack，以便fonts.css在版本化的 CSS 文件和static/fonts目录中的字体文件中结束？

4

3 回答 3

0

使用 "webpack": "^3.10.0" 。/节点v8.9.3，“vue”：“^2.5.13”和“google-fonts-webpack-plugin”：“^0.4.4”，

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 中，按原样使用字体系列...

        .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;
        }

现在在暂存，生产分发中，需要在

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 将如下

webpack 构建文件结构

在静态文件夹旁边，您会得到：

  • 包含来自 googlefonts 的所有字体的字体文件夹
  • 带有 @font-face{font-family.... 和相对于字体文件夹的 URL 的 fonts.css 文件
  • 一个 fonts.css.map
于 2018-03-16T11:01:54.603 回答
0

我认为你不会让这个插件与 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 ）

于 2017-07-03T03:06:01.963 回答
0

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

于 2017-12-21T19:40:49.710 回答