WordPress загружает .SCSS вместо .CSS

Недавно я установил и запустил Sass и WAMP на своем новом ПК и начал работать над новым сайтом WordPress на своем локальном хосте.

Но затем я заметил, что WordPress загружает файл .SCSS, хотя я поставил в очередь таблицу стилей CSS следующим образом в файле functions.php:

function theme_primary_css() {
wp_enqueue_style( 'theme-styles', get_template_directory_uri().'/css/theme-styles.css' ); 
}
add_action( 'wp_enqueue_scripts', 'theme_primary_css' );

Я вижу, что theme-style.css успешно загружается, когда я смотрю на исходный код сайта. Но при просмотре инструментов веб-разработчика я вижу, что он загружает CSS из файла .SCSS. В чем дело?

Инструменты разработчика показывают .scss, но файл .css загружается правильно

Это может быть полезно для отладки и т. д., но у меня есть проблема при использовании таких вложенных стилей:

h1 {
    .entry-title {
       margin-top: 0px;
    }
}

Этот стиль не работает — вероятно, потому, что он загружает файл .scss — но в то же время мои переменные, установленные в .scss, работают нормально (хотя он загружает .scss, а не файл .css — 30 пикселей, которые вы видите в картинка на самом деле является переменной). Я довольно смущен!

Кстати, я использую Brackets с установленным автокомпилятором (который отлично работает).

Я надеюсь, что кто-то может мне помочь!

Заранее спасибо!


sass map-files
person Andreas Søgaard Pedersen    schedule 15.10.2015    source источник
comment
Это просто хром "полезен". Я уверен, что вы можете отключить эту функцию, но я не могу вспомнить прямо сейчас - посмотрите в Google.   -  person Steve    schedule 15.10.2015
comment
Он не загружает SCSS... он использует файл карты, чтобы помочь вам в инспекторе. Подробнее читайте в документации SASS.   -  person rnevius    schedule 15.10.2015
comment
stackoverflow.com/questions/24813349/ своего рода противоположная проблема, но суровая строка карты является важным битом - удалите ее из вашего скомпилированного css, и хром не будет знать о файлах scss   -  person Steve    schedule 15.10.2015

Ответы (1)


arrow_upward
1
arrow_downward

Спасибо за помощь Стиву и Рневиусу! Вы меня на правильном пути.

Причина, по которой мой стиль не работал, заключалась в том, что я пропустил знак & перед классом .entry-title. Таким образом, рабочий Sass получился таким:

h1 {
   font-size: $h1-size;

   &.entry-title {
    margin-top: 0px;
   }
}

Итак, как указал Рневиус, он не загружает файл .scss — он просто показывает файл .scss в инспекторе, чтобы помочь мне в разработке, что очень полезно. Итак, я пришел к выводу, что проблема была в моем CSS/Sass, и да, я пропустил знак &, как упоминалось выше. Теперь все работает.

Надеюсь, это поможет другим людям, уставшим от написания кода, таким как я. Я сейчас пойду спать :D

person Andreas Søgaard Pedersen    schedule 15.10.2015