CSS file loading order in VueJS - css

Question

I am relatively new to VueJS, and currently I run into an issue with styles related to semantic ui. The problem is that semantic ui's styles overload custom styles. And the CSS developer told me to make sure that semantic ui's css is loaded before all other css files.
Notably, my current code looks like this:
App.vue
<template>
...
</template>
<script>
export default {
name: "App",
};
</script>
<style>
#import "styles/my_custom_css.css";
</style>
main.js (only relevant part, might not be a working code)
import Vue from 'vue';
import App from './App.vue';
import SuiVue from 'semantic-ui-vue';
import 'semantic-ui-css/semantic.min.css';
Vue.use(SuiVue);
new Vue({
el: '#app'
render: h => h(App)
});
I wonder how to ensure that semantic.min.css is loaded before styles/my_custom_css.css. Maybe I need to reorganize the code structure ?

Answer 1

you could import it in the same place, but before your own .css-file
// App.vue
<style>
#import 'semantic-ui-css/semantic.min.css';
#import 'styles/my_custom_css.css';
</style>
And the CSS developer told me to make sure that semantic ui's css is loaded before all other css files.
He is right. because css stands for cascading style sheet. the styling is adjusted line by line.
Whatever is called first will be adjusted first. So the last line of the styling will always be the one actually used. The term cascade gives you the hint. If you put your css before the semantic one, the semantic one overwrites your css and vice versa.