gridsome.config.js

// This is where project configuration and plugin options are located.
// Learn more: https://gridsome.org/docs/config

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

const path = require('path')

function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, './src/assets/styles/_globals.scss')]
    })
}

module.exports = {
  siteName: 'Gridsome',

  // Preconfigured for Netlify.
  siteUrl: process.env.BRANCH
    ? process.env.BRANCH == 'master'
      ? process.env.URL
      : process.env.DEPLOY_PRIME_URL
    : 'https://localhost',

  pathPrefix: process.env.BASE_DIR || '',

  titleTemplate: `%s | Gridsome`,

  plugins: [
    {
      use: '@gridsome/plugin-sitemap'
    }
  ],

  chainWebpack(config) {
    // Load variables for all vue-files
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']

    types.forEach(type => {
      addStyleResource(config.module.rule('sass').oneOf(type))
    })

    // or if you use scss
    types.forEach(type => {
      addStyleResource(config.module.rule('scss').oneOf(type))
    })
  }
}