Wordpress 样式表问题:资源解释为样式表,但使用 MIME 类型传输

Posted

技术标签:

【中文标题】Wordpress 样式表问题:资源解释为样式表,但使用 MIME 类型传输【英文标题】:Wordpress Stylesheet Issue: Resource interpreted as Stylesheet but transferred with MIME type 【发布时间】:2018-11-09 19:41:02 【问题描述】:

我正在尝试在 Wordpress 中正确设置我的 functions.php 文件。我一直在使用的主题是在 header.php 中拉入样式表和 JS 文件,所以我无法创建覆盖这些的子主题。我正在尝试将样式表和 JS 文件排入 functions.php 而不是 header.php 中。但是,没有任何样式出现,我收到了这个错误:

Resource interpreted as Stylesheet but transferred with MIME type

这是原始的 header.php:

<!-- WP Linked Resources -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 
type="text/css" media="screen" />
<link rel="shortcut icon" href="<?php echo 
get_stylesheet_directory_uri(); ?>/favicon.ico" />

<!-- Bootstrap -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ? 
>/assets/bootstrap.min.css">

<!-- MegaMenu stylesheet -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ? 
>/assets/megamenu.css">

<!-- Webfont Kit -->
<link rel="stylesheet" type="text/css" href="<?php 
bloginfo('template_directory'); ?>/assets/MyFontsWebfontsKit.css">

<!-- less -->
<link rel="stylesheet/less" type="text/css" href="<?php 
bloginfo('template_directory'); ?>/assets/stylesheet.less">
<script src="<?php bloginfo('template_directory'); ?>/assets/less.js" 
type="text/javascript"></script>

<!-- print CSS -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ? 
>/assets/print.css" type="text/css" media="print" />

<!-- google translate -->
<meta name="google-translate-customization" content="d4ae87e62341359b- 
83f2b047a4c8818c-g4cbb26cb8a5f11dd-11"></meta>

<!-- android scroll bug fix -->
<script type="text/javascript" src="<?php 
bloginfo('template_directory'); ?>/assets/touchscroll.js"></script>

<?php wp_head(); ?>

这是functions.php,我试图将原始header.php中的所有文件排入队列

function add_theme_scripts() 
wp_enqueue_style( 
    'generic-style',
get_stylesheet_directory_uri() );

wp_enqueue_style( 
  'favicon',
  get_stylesheet_directory_uri().'favicon.ico');

wp_enqueue_style( 
    'bootstrap',
    get_stylesheet_directory_uri(). '/assets/bootstrap.min.css');

wp_enqueue_style( 
    'megamenu-stylesheet',
    get_stylesheet_directory_uri(). '/assets/megamenu.css');  

wp_enqueue_style( 
    'webfont-kit',
    get_stylesheet_directory_uri().'/assets/MyFontsWebfontsKit.css'); 

wp_enqueue_style( 
    'less',
    get_stylesheet_directory_uri().'/assets/stylesheet.less');

wp_enqueue_script( 
    'less-js',
    get_stylesheet_directory_uri().'/assets/less.js');

wp_enqueue_style( 
  'print-css',
  get_stylesheet_directory_uri().'/assets/print.css');


add_action( 'wp_enqueue_scripts', '/add_theme_scripts' );

关于如何正确地将我的 css 和 JS 加入队列有什么建议吗?

【问题讨论】:

【参考方案1】:

如果 css 和 js 位于您的主题文件夹中,您应该尝试使用 get_template_directory_uri()。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() 

wp_enqueue_style( 'generic-style', get_stylesheet_directory_uri() );

wp_enqueue_style( 'favicon', get_template_directory_uri() . '/favicon.ico');

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/bootstrap.min.css');

wp_enqueue_style( 'megamenu-stylesheet', get_template_directory_uri() . '/assets/megamenu.css');

wp_enqueue_style( 'webfont-kit', get_template_directory_uri() .'/assets/MyFontsWebfontsKit.css'); 

wp_enqueue_style( 'less', get_template_directory_uri() .'/assets/stylesheet.less');

wp_enqueue_script( 'less-js', get_template_directory_uri() .'/assets/less.js');

wp_enqueue_style( 'print-css', get_template_directory_uri() .'/assets/print.css');

【讨论】:

【参考方案2】:

解决方案

所以我发现我的 stylesheet.less 是用 MIME 类型 text/plain 传输的,因为浏览器不知道如何解释 less。我通过打开终端,转到 wp-content > 主题 > mytheme > 资产(我的 stylesheet.less 所在的位置)并输入以下内容,将我的 less 编译为 css:

npm install -g less

lessc stylesheet.less > stylesheet.css

然后我更新了 functions.php 以将正确的样式表加入队列:

wp_enqueue_style( 
'less',
get_stylesheet_directory_uri().'/assets/stylesheet.css');

应该这样做!

注意 我仍然无法让我的网站正确呈现样式,因此我浏览了我排入队列的所有文件并将它们一一注释掉,以查看是否解决了问题。我发现我的 print.css 文件是罪魁祸首,所以我将其注释掉并且我的网站运行正常。

【讨论】:

以上是关于Wordpress 样式表问题:资源解释为样式表,但使用 MIME 类型传输的主要内容,如果未能解决你的问题,请参考以下文章

资源解释为样式表,但使用 mime 传输

Flask:资源解释为样式表,但使用 MIME 类型 text/html 传输

资源解释为样式表,但使用 MIME 类型 text/x-scss 传输

资源解释为样式表,但使用 MIME 类型 text/html 传输

资源解释为样式表,但使用 MIME 类型 text/javascript 传输

Springboot - 资源解释为样式表,但使用 MIME 类型 text/html 传输