CODEWITHSUNDEEP
cssvue.js
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

CSS file loading order in VueJS

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 ?

Upvotes: 1

Views: 1607

Answers (1)

wittgenstein
wittgenstein

Reputation: 4462

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.

Upvotes: 2

Related Questions