Drupal 관리 화면의 성능 설정에서 대역폭 최적화 > CSS 파일을 한꺼번에 압축(Aggregate and compress CSS files.)을 체크하면 여러 CSS 파일을 하나로 정리해 줍니다.



대역폭 최적화를 설정하면 파일 크기가 줄어들어 회선 대역 사용률이 줄어들고 파일 수가 줄어 세션 수가 줄어 성능이 향상됩니다.

Drupal의 CSS 파일 압축 기능의 작동 방식은 여러 CSS 파일을 하나의 CSS 파일로 결합하여 "sites/default/files/css"에 저장되며 이후에는 압축 파일이 로드됩니다.

그러나이 CSS 압축 기능을 사용하도록 설정하면 드물게 테마가 무너질 수 있습니다.

테마가 무너지는 원인

이유는 다음 5가지가 있습니다.

1. 압축 CSS를 저장할 위치에 Apache 사용자 쓰기 권한이 없습니다.

Drupal은 Apache 사용자로 작동하므로 사용자에게 폴더 쓰기 권한이 없으면 CSS 파일을 생성할 수 없어 표시가 끊어질 수 있습니다.

2. css 파일에서 @import를 사용합니다.

CSS 파일내에서 @import 를 사용하고 있으면 파일 순서가 엉망이 되어 의도한 상속·덮어쓰기가 되지 않게 되어 버립니다.
@import 을 사용하고 있지 않을 생각이라도 도입 모듈 안에서 사용되고 있는 일이 있으므로, 의도하지 않고 테마가 무너지면 그 변이 원인이 되고 있을 가능성은 있습니다.
도입 모듈이 원인일 때는 컨트리뷰트 모듈을 수정할 필요도 없기 때문에, 테마측의 CSS 파일상에서 @!important 등을 이용해 영향을 받지 않는 궁리를 할 필요가 있습니다.

다만, CSS 파일에 기술했을 경우에 문제가 일어납니다만, SASS/SCSS로 사용하는 분에는 문제 없습니다.

3. CSS 압축 파일 저장 디렉토리에 영숫자와 밑줄 이외의 특수 문자를 사용하고 있습니다.

저장 디렉토리에 영숫자 및 밑줄 이외의 특수 문자를 사용하는 경우 CSS 파일이 저장되지 않으면 Drupal.org 스레드에서 보고됩니다.

4. css를 gzip 압축 설정을 할 때 이전 IE 브라우저를 읽을 수 없습니다.

이전 IE 브라우저(IE6)는 gzip 압축된 CSS를 해석할 수 없습니다. 다만, 2016년 시점에서 IE6에 조우하는 일은 없기 때문에 신경쓰지 않을 것입니다.

5. CSS의 gzip 압축으로 실패

이 문제는 .htaccess 파일에 gzip 압축 처리를 직접 작성한 경우 설명 오류로 인해 발생합니다.
해결 방법은 자체적으로 처리하지 않고 Apache의 mod_deflate에 맡기거나 Drupal 모듈 "Advanced CSS/JS Aggregation (advagg)"를 도입하는 것입니다.

또 다른 원인은 Drupal 캐시 + (nginx + Varnish)에서 CSS의 gzip 압축이 실패한다는보고입니다.
웹 서버가 nginx + Varnish의 조합에서는 항상 CSS · JS 파일을 gzip 압축하지만, Drupal 캐시와 합치면 파일 인코딩이 이상해지는 것이 원인인 것 같습니다.
솔루션은 Drupal 캐시를 활성화할 때 nginx+Varnish의 기본 설정을 변경해야 합니다.