素人がDreamweaverでBootstrapのSCSSを使用する

2019年8月22日

Dreamweaverについて勉強中です。

Dreamweaverを導入したので、BootstrapのSCSSを使用できるようにするメモ。

BootstrapのSCSSをダウンロードする

BootstrapのSCSSをダウンロードしてきます。

Download source」

をクリックして「bootstrap-4.3.1.zip」をダウンロード。

「bootstrap-4.3.1.zip」を解凍すると下記のようなフォルダ構成になっています。

SCSSフォルダに必要なものは全て入っているので、自分のサイトにSCSSフォルダを全部コピーします。

SCSSフォルダ内は下記の様になっています。

自分のサイトにSCSSをコピーしたら、custom.css、custom.scssを入れるフォルダを制作します。

このcustom.scss内に下記の様なコードを記述して、bootstrapのscssを読み出すようにする。

// BootstrapのSassファイルをインポート
@import "../scss/functions";
@import "../scss/variables";
@import "../scss/mixins";

// Optional
@import "../scss/root";
@import "../scss/reboot";
@import "../scss/type";
@import "../scss/images";
@import "../scss/code";
@import "../scss/grid";
@import "../scss/tables";
@import "../scss/forms";
@import "../scss/buttons";
@import "../scss/transitions";
@import "../scss/dropdown";
@import "../scss/button-group";
@import "../scss/input-group";
@import "../scss/custom-forms";
@import "../scss/nav";
@import "../scss/navbar";
@import "../scss/card";
@import "../scss/breadcrumb";
@import "../scss/pagination";
@import "../scss/badge";
@import "../scss/jumbotron";
@import "../scss/alert";
@import "../scss/progress";
@import "../scss/media";
@import "../scss/list-group";
@import "../scss/close";
@import "../scss/modal";
@import "../scss/tooltip";
@import "../scss/popover";
@import "../scss/carousel";
@import "../scss/utilities";
@import "../scss/print";

コメントアウトさせれば必要のないSCSSを読み込まないので、コンパクトにすることが出来る。

custom.scssはbootstrapのscss内容をimportしてcustom.cssに出力します。

Dreamweaverからはこのcustom.cssを読み込んで、webページを制作していきます。