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";