Files
2020-02-02 13:47:47 +01:00

44 lines
1.3 KiB
JavaScript

/**
* 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')
});
});
});
}
};