Wordpress样式表问题：资源被解释为样式表，但以MIME类型传输

Question

I'm trying to properly setup my functions.php file in Wordpress. The theme I've been using has been pulling in the stylesheets and JS files in header.php, so I couldn't make a child theme that overwrote these. I'm trying to enqueue the stylesheets and JS files in functions.php instead of header.php. However, none of the styling is showing up, and i'm getting this error:

Resource interpreted as Stylesheet but transferred with MIME type

Here's the original 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(); ?>

Here's functions.php, where I'm trying to enqueue all the files that were in the original 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' );

Any suggestions on how to enqueue my css and JS properly?

Answer 1

You should try using the get_template_directory_uri() if the css and js is located in your theme folder.

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');
}

Answer 2

SOLUTION

So I found that my stylesheet.less was being transferred with MIME type text/plain, because a browser doesn't know how to interpret less. I compiled my less into css by opening my terminal, going to the wp-content > themes > mytheme > assets (where my stylesheet.less lives) and typing the following:

npm install -g less

lessc stylesheet.less > stylesheet.css

I then updated functions.php to enqueue the correct stylesheet:

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

That should do it!

NOTE I was still having issues with getting my site to render styles properly, so I went through all the files I enqueue and commented them out one by one to see if that fixed the issue. I found that my print.css file was the culprit, so I commented that out and my site is working properly.