{"id":3961,"date":"2022-12-30T14:18:41","date_gmt":"2022-12-30T05:18:41","guid":{"rendered":"https:\/\/417.run\/?p=3961"},"modified":"2023-02-18T03:40:34","modified_gmt":"2023-02-17T18:40:34","slug":"scss","status":"publish","type":"post","link":"https:\/\/417.run\/pg\/python\/django\/scss\/","title":{"rendered":"Django\u3067SCSS\u3092\u4f7f\u3063\u3066\u307f\u308b"},"content":{"rendered":"<p><code>django-sass-processor<\/code>\u3068\u3044\u3046\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3046\u3063\u307d\u3044\u3002<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">\u76ee\u6b21<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#django-sass-processor%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B\" title=\"django-sass-processor\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\">django-sass-processor\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#SCSS%E3%82%92%E4%BD%BF%E3%81%86%E8%A8%AD%E5%AE%9A\" title=\"SCSS\u3092\u4f7f\u3046\u8a2d\u5b9a\">SCSS\u3092\u4f7f\u3046\u8a2d\u5b9a<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#SCSS%E3%82%92%E4%BD%BF%E3%81%86\" title=\"SCSS\u3092\u4f7f\u3046\">SCSS\u3092\u4f7f\u3046<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#SCSS%E3%82%92%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B\" title=\"SCSS\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\">SCSS\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#%E8%87%AA%E5%8B%95%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB\" title=\"\u81ea\u52d5\u30b3\u30f3\u30d1\u30a4\u30eb\">\u81ea\u52d5\u30b3\u30f3\u30d1\u30a4\u30eb<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B\" title=\"\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\">\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/417.run\/pg\/python\/django\/scss\/#Static%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%A7%BB%E5%8B%95%E3%81%99%E3%82%8B\" title=\"Static\u30d5\u30a1\u30a4\u30eb\u3092\u79fb\u52d5\u3059\u308b\">Static\u30d5\u30a1\u30a4\u30eb\u3092\u79fb\u52d5\u3059\u308b<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"django-sass-processor%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B\"><\/span>django-sass-processor\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre><code class=\"language-sh\">pip install libsass django-compressor django-sass-processor<\/code><\/pre>\n<p><code>django-sass-processor<\/code>\u306e\u30da\u30fc\u30b8\u3067\u3053\u308c\u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u66f8\u3044\u305f\u3042\u3063\u305f\u306e\u3067\u3001<br \/>\n<code>libsass<\/code>\u3068<code>django-compressor<\/code>\u3082\u5fc5\u8981\u307f\u305f\u3044\u3002<\/p>\n<h2><span class=\"ez-toc-section\" id=\"SCSS%E3%82%92%E4%BD%BF%E3%81%86%E8%A8%AD%E5%AE%9A\"><\/span>SCSS\u3092\u4f7f\u3046\u8a2d\u5b9a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<span class=\"bold\">settings.py<\/span>\n<code>INSTALLED_APPS<\/code>\u306b<code>sass_processor<\/code>\u3092\u8ffd\u52a0\u3059\u308b<\/p>\n<pre><code class=\"language-python\">INSTALLED_APPS = [\n    ...\n    &#039;sass_processor&#039;,\n    ...\n]<\/code><\/pre>\n<p><code>STATICFILES_FINDERS<\/code>\u3092\u8ffd\u52a0\u3059\u308b<\/p>\n<pre><code class=\"language-python\">STATICFILES_FINDERS = [\n    &#039;django.contrib.staticfiles.finders.FileSystemFinder&#039;,\n    &#039;django.contrib.staticfiles.finders.AppDirectoriesFinder&#039;,\n    &#039;sass_processor.finders.CssFinder&#039;,\n]<\/code><\/pre>\n<p>CSS\u306f<code>STATIC_ROOT<\/code>\u306b\u51fa\u529b\u3055\u308c\u307e\u3059\u304c<code>SASS_PROCESSOR_ROOT<\/code>\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b<br \/>\n\u51fa\u529b\u3092min\u5316\u3059\u308b\u5834\u5408\u306f\u3001<code>SASS_OUTPUT_STYLE = &#039;compressed&#039;<\/code>\u3092\u3064\u3051\u308b<\/p>\n<pre><code class=\"language-python\">SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, &#039;static&#039;)\nSASS_OUTPUT_STYLE = &#039;compressed&#039;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"SCSS%E3%82%92%E4%BD%BF%E3%81%86\"><\/span>SCSS\u3092\u4f7f\u3046<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u5148\u982d\u3067\u30ed\u30fc\u30c9\u3057\u3066<\/p>\n<pre><code class=\"language-html\">{% load sass_tags %}<\/code><\/pre>\n<p>css\u307f\u305f\u3044\u306b\u8aad\u307f\u8fbc\u3080<\/p>\n<pre><code class=\"language-html\">&lt;link rel=&quot;stylesheet&quot; href=&quot;{% sass_src &#039;css\/hoge.scss&#039; %}&quot; \/&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"SCSS%E3%82%92%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B\"><\/span>SCSS\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%E8%87%AA%E5%8B%95%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB\"><\/span>\u81ea\u52d5\u30b3\u30f3\u30d1\u30a4\u30eb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"language-python\">SASS_PROCESSOR_ENABLED = True<\/code><\/pre>\n<p>\u958b\u767a\u6bb5\u968e\u3067\u306f\u3001<code>SASS_PROCESSOR_ENABLED<\/code>\u3092<code>True<\/code>\u306b\u3057\u3068\u304f\u3068\u81ea\u52d5\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u307e\u3059<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B\"><\/span>\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"language-shell\">python manage.py compilescss<\/code><\/pre>\n<p>\u672c\u756a\u74b0\u5883\u3067\u306f\u3001<code>SASS_PROCESSOR_ENABLED<\/code>\u3092<code>False<\/code>\u306b\u3057\u3066\u3001<br \/>\n<code>python manage.py compilescss<\/code>\u3092\u3059\u308b\u3068<br \/>\n<code>SASS_PROCESSOR_ROOT<\/code>\u306a\u3044\u5834\u5408\u306f<code>STATIC_ROOT<\/code>\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u307e\u3059\u3002<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Static%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%A7%BB%E5%8B%95%E3%81%99%E3%82%8B\"><\/span>Static\u30d5\u30a1\u30a4\u30eb\u3092\u79fb\u52d5\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Django\u3067\u306fstatic\u30d5\u30a1\u30a4\u30eb\u306f\u307e\u3068\u3081\u3066\u3001\u516c\u958b\u30d5\u30a9\u30eb\u30c0\u306b\u7f6e\u3044\u3068\u304f\u611f\u3058\u306b\u3059\u308b\u306e\u3067\u3001<code>collectstatic<\/code>\u3067\u3042\u3064\u3081\u307e\u3059<\/p>\n<pre><code class=\"language-shell\">python manage.py collectstatic<\/code><\/pre>\n<blockquote>\n<p><a href=\"https:\/\/pypi.org\/project\/django-sass-processor\/\">https:\/\/pypi.org\/project\/django-sass-processor\/<\/a><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>django-sass-processor\u3068\u3044\u3046\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3046\u3063\u307d\u3044\u3002 \u76ee\u6b21 django-sass-processor\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308bSCSS\u3092\u4f7f\u3046\u8a2d\u5b9aSCSS\u3092\u4f7f\u3046SCSS\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u81ea\u52d5\u30b3\u30f3\u30d1\u30a4\u30eb\u30b3\u30f3\u30d1\u30a4\u30eb &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":{"0":"post-3961","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-django","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/417.run\/wp-json\/wp\/v2\/posts\/3961"}],"collection":[{"href":"https:\/\/417.run\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/417.run\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/417.run\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/417.run\/wp-json\/wp\/v2\/comments?post=3961"}],"version-history":[{"count":12,"href":"https:\/\/417.run\/wp-json\/wp\/v2\/posts\/3961\/revisions"}],"predecessor-version":[{"id":4338,"href":"https:\/\/417.run\/wp-json\/wp\/v2\/posts\/3961\/revisions\/4338"}],"wp:attachment":[{"href":"https:\/\/417.run\/wp-json\/wp\/v2\/media?parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/417.run\/wp-json\/wp\/v2\/categories?post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/417.run\/wp-json\/wp\/v2\/tags?post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}