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

Question

我正试图在Wordpress中正确地设置我的functions.php文件。我一直使用的主题是在header.php中提取样式表和JS文件，所以我无法创建一个覆盖这些内容的子主题。我试图将样式表和JS文件排在functions.php中而不是header.php中。但是，没有出现任何样式，我得到了以下错误：

解释为样式表但使用MIME类型传输的资源

，这是原始的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有什么建议吗？

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

Answer 2

溶液

因此，我发现我的stylesheet.less是用MIME类型的文本/纯文本传输的，因为浏览器不知道如何解释更少的内容。我通过打开我的终端，打开wp内容>主题>我的主题>资产(我的stylesheet.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文件是罪魁祸首，所以我评论说，我的网站运行正常。