在GTMextrix上出现“避免CSS @import”错误

Question

我得到了上面的错误。这意味着什么，我如何避免这个错误？

www中包含了以下外部样式表。使用@ .com/wp-content/uploads/siteorigin-widgets/sow-headline-sow-headline-b88ac2022dcc.css的mydomain导入。

fonts.googleapis.com/css?family=Roboto:100 www中包含了以下外部样式表。使用@ .com/wp-content/uploads/siteorigin-widgets/sow-headline-sow-headline-cf2c2d01606b.css的mydomain导入。

fonts.googleapis.com/css?family=Roboto:100 www中包含了以下外部样式表。使用@ .com/wp-content/uploads/siteorigin-widgets/sow-headline-sow-headline-e62e936af02f.css的mydomain导入。

fonts.googleapis.com/css?family=Roboto:300

Answer 1

对每个样式表使用< link >标记，如下所示

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>

Answer 2

使用@import语法的问题是它对页面加载时间有非常负面的影响。许多文章都很好地解释了这一点--这是一个很好的例子：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

为了避免这种情况，在Wordpress中，您可以使用几种不同的方法进行导入。首先，您需要找到当前导入此样式表的位置，并删除该引用

完成后，可以使用几种不同的方法将样式表导入到Wordpress中。

首先，您可以直接将导入的链接标记插入到您的header.php文件中(正如用户Mo‘can穆罕默德所指定的那样)

或者，您可以将以下代码直接插入到functions.php文件中，这样也可以正确地加载css

add_action( 'wp_enqueue_scripts', 'add_stylesheets' );

/**
 * Add stylesheet to the page
 */
function add_stylesheets() {
    wp_enqueue_style('google-font-roboto', 'https://fonts.googleapis.com/css?family=Roboto:100');
}

这里很好地解释了这种方法：http://www.paulund.co.uk/add-stylesheets-to-wordpress-correctly