v7.1.0

Gatsby

Table of Contents

Install

MUSUBii を Gatsby.js で使う場合は、必要なライブラリをインストールして設定を行います。

npm install --save-dev gatsby gatsby-plugin-sass node-sass
yarn add --dev gatsby gatsby-plugin-sass node-sass

Setting

gatsby-config.js

module.exports = {
  plugins: ["gatsby-plugin-sass"]
}

layout.js

// Import Styles
import "src/assets/scss/project.scss"

SCSS

src/assets/scss/project.scss

@import "./configs/_import.scss";
@import "./styles/_import.scss";

src/assets/scss/configs/_import.scss

// Configs
// 変数をオーバーライドする場合は configs より先に同名で定義します
// 例えば $option-css-variables: true で CSS Variables を有効化
@import "~musubii/src/scss/configs/_import.scss";

src/assets/scss/styles/_import.scss

// Styles
@import "~musubii/src/scss/styles/_import.scss";

Sources