将“google-fonts-webpack-plugin”集成到“vue-webpack”构建过程中

我正在尝试将静态脱机字体集成到我的Webpack构建过程中。我使用vue-webpack构建过程作为构建过程的基础。将“google-fonts-webpack-plugin”集成到“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({ 
    [ ... ]

的谷歌的字体-的WebPack-插件生成的文件似乎是完全独立的，否则定期生成的文件。这意味着，生成的fonts.css不是版本化CSS文件的一部分。在dist/文件夹中，出现fonts.css和目录fonts/，但它们甚至不在static/文件夹中。

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

来源

2017-06-26 ssc-hrep3

也许你可以导入或需要它在你的.js文件之一。这同样适用。 – Reiner

该插件下载文件并将其添加到输出中。这些文件并不是事先存在的，但是只有在构建之后，所以我不能在源文件中要求它。我可以手动下载字体文件并需要它，但是webpack插件的全部内容被削弱了。 –

我不认为你会得到这个插件与Vue的webpack构建。你可以添加一些配置，以使您想要的字体和CSS，例如：

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

但该插件编写方式，前档装载机尝试访问CSS文件，你不能得到的文件并抛出一个错误。您也可以将字体直接放在./dist文件夹中，但该插件会使用绝对路径（即/dist/static/fonts/）在index.html中写入路径，并且似乎没有办法在不更改的情况下更改该路径源代码。

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

来源

2017-07-03 03:06:01

感谢您的回答！你知道任何可能与vue-webpack构建一起工作的webpack插件吗？我不喜欢下载这些文件并将它们添加到源文件夹或将Gulp集成到我的构建过程中的想法。 –

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

来源

2017-12-21 19:40:49 garlon4

将“google-fonts-webpack-plugin”集成到“vue-webpack”构建过程中

回答

相关问题