Блог

Я пытаюсь включить один файл в другой с помощью директивы импорта sass и написал

 % cat plugged.scss 
#plugged {
  @import 'content.css';
}
 

и у меня есть простые

 % cat content.css 
body {
    background-color: yellow;
}
 

К сожалению, когда я это делаю

 % sass plugged.scss plugged.css
 

Я получаю

 % cat plugged.css              
#plugged {
  @import 'content.css';
}
 

Т. е. вменение просто копируется на вывод без какой-либо обработки. Разве он не должен объединять один файл в другой?

Как это исправить и/или чего мне не хватает?

Версия является

 % sass --version
1.43.4
 

Я удалил расширения имен файлов, и это сделало что-то странное:

 dims@raikron410 sass01 % ls content                            
content
dims@raikron410 sass01 % head -c 800 content                  
/*!
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",%                                  
dims@raikron410 sass01 % cat plugged4.scss
#plu {
    @import 'content';
  }
  %                                                                                                                                                         
dims@raikron410 sass01 % cat plugged4.scss
#plu {
    @import 'content';
}%                                                                                                                                                          
dims@raikron410 sass01 % sass plugged4.scss plugged4.css
dims@raikron410 sass01 % cat plugged4.css
#plu body {
  background-color: yellow;
}

/*# sourceMappingURL=plugged4.css.map */
 

Что происходит? Куда это привело yellow ????

Я думаю, это потому, что вы импортируете .css файл a в Sass.

Избавьтесь от расширения css.-при импорте файлов такого рода:

 % cat plugged.scss 
#plugged {
  @import 'content';
}
 

Отличный вопрос!

Чтобы импортировать обычный CSS-файл в Sass, вам нужно будет удалить расширение файла .css.

 @import 'content'
 

В официальной документации Sass об этом говорится здесь с примером в разделе «Импорт CSS»: Документация Sass

Вот скриншот из документации Sass: