Webpack Troubleshoot Google fonts references in the semantic UI

The first line of the semantic UI CSS refers to the Google Web font API, which is inaccessible in the country due to hidden and well-known reasons:

@import url (' Https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin ');

CSS is blocking rendering, and import in CSS will further block loading and rendering, so the page style loading is very slow.

Open-source frameworks like the semantic UI are generally installed using NPM or bower, and it's not good to directly modify the source code.

With Webpack's string-replace-webpack-plugin, you can replace this quote to resolve rendering blocking issues.

The following is an example of the relevant webpack.config.js configuration for reference:

varPath = require (' path ')varExtracttextplugin = require (' Extract-text-webpack-plugin '))varStringreplaceplugin = require (' String-replace-webpack-plugin ')) Module.exports={entry: {common:'./static/src/global.js '}, Output: {filename:' [Name].js ', Path:path.resolve (__dirname,' static/global/'), Publicpath:'/static/global/'}, module: {rules: [{test:/\.css$/, Use:ExtractTextPlugin.extract ({use: [' Css-loader ']})}, {test:/\.scss$/, Use:ExtractTextPlugin.extract ({use: [' Css-loader ', ' Sass-loader ']})}, {test:/semantic\.css$/, Loader:StringReplacePlugin.replace ({replacements: [{pattern:/https\:\/\/fonts\.googleapis\.com[^\ ']+/IG, Replacement:function(Match, P1, offset, string) {return' data:text/css,*{} '}}]} )}]}, plugins: [NewExtracttextplugin (' Common.css '),    NewStringreplaceplugin ()]}

It is important to note that the rule in Webpack v2 is in the order from the back to the front, right to left, so the rule of semantic.css replication is put to the last, and does not contain other loader settings.

Webpack Troubleshoot Google fonts references in the semantic UI