/**
 * This array must contains variables files only!!!! These declared files are attached to each vue
 * component and therefore has to be as small as possible. Global styles should be defined in styles.scss and not here.
 *
 * The "chainWebpack" property is needed to get the scss work together with sass files
 * from 3 party libraries like Vuetify.
 *
 * For further information take a look at:
 * https://joshuatz.com/posts/2019/vue-mixing-sass-with-scss-with-vuetify-as-an-example/
 */
const globalScssConfigFiles = [
  '~@/styles/_colors.scss',
  '~@/styles/_responsive.scss',
  '~@/styles/_variables.scss',
];

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'de',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false
    }
  },
  css: {
    loaderOptions: {
      sass: {
        data: globalScssConfigFiles.map((src)=>'@import "' + src + '";').join('\n')
      }
    }
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('sass').oneOf(match).use('sass-loader')
          .tap(opt => {
            return Object.assign(opt, {
              data: globalScssConfigFiles.map((src)=>'@import "' + src + '"').join('\n')
            });
          });
    });
  }
};