SCSS


<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">ライブラリのインストール</a></li><li><a href="#settings">settingsの追記</a></li><li><a href="#i-2">テンプレートに追記</a></li></ul></div>
<h2><span id="i">ライブラリのインストール</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ pip install libsass django-compressor django-sass-processor</code></pre></div>



<h2><span id="settings">settingsの追記</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-file="/settings.py" data-lang="Python"><code>INSTALLED_APPS = [
    ...
    &#39;sass_processor&#39;,
]

# Sass(SCSS)
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, &#39;static&#39;)
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r&#39;^.+\.(sass|scss)$&#39;
SASS_PRECISION = 8
SASS_OUTPUT_STYLE = &#39;compressed&#39;
SASS_TEMPLATE_EXTS = [&#39;.html&#39;, &#39;.haml&#39;]</code></pre></div>



<h2><span id="i-2">テンプレートに追記</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-html" data-lang="HTML"><code>{% load sass_tags %}

&lt;link rel=&quot;stylesheet&quot; href=&quot;{% sass_src &#39;【アプリケーション名】/【Sass(scss)ファイル名】&#39; %}&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{% sass_src &#39;css/reset.scss&#39; %}&quot;&gt;</code></pre></div>



<p>これで導入できました。</p>


「SCSS」の記事一覧