CODEWITHSUNDEEP
vue.jswebpackvuejs2
Saro
Saro

Reputation: 107

importing global css to VueJs does not load css to app bundle

I imported the semantic-ui css to the top Vue component in my app(App.vue) as the following

<style>
    @import '/assets/css/semantic.rtl.min.css';
</style>

but the Css is not available and not applied I am well aware that I could import CSS files in index.html but I wanted to load it in the app so it got compile in to one file along other files. in general what is the best way for importing global static CSS files to VueJs? should I do some more configuration for properly loading the CSS files?

Upvotes: 1

Views: 4632

Answers (1)

Gabriel Willemann
Gabriel Willemann

Reputation: 1921

You can import the CSS file in main.js. See the example below:

import Vue from 'vue';
import './assets/css/semantic.rtl.min.css';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app')

In build time your CSS file will be processed.

Upvotes: 4

Related Questions