v7.1.0

Gridsome

Table of Contents

Install

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

npm install --save-dev gridsome gridsome-plugin-sass-resources-loader node-sass sass-loader

yarn add --dev gridsome gridsome-plugin-sass-resources-loader node-sass sass-loader

Setting

gridsome.config.js

module.exports = {
  plugins: [
    {
      use: "gridsome-plugin-sass-resources-loader",
      options: {
        resources: "@/assets/scss/configs/_import.scss"
      }
    }
  ]
}

src/main.js

// Import Styles
import "~/assets/scss/styles/_import.scss"

// Layouts
import DefaultLayout from "~/layouts/Default.vue"

// Global components
export default function(Vue, { router, head, isClient }) {
  Vue.component("Layout", DefaultLayout)
}

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