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

Question

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?

Penny Liu · Accepted Answer · 2023-12-14 08:51:40Z

4

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.

edited Dec 14, 2023 at 8:51

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Feb 10, 2020 at 19:24

Gabriel Willemann

1,9211 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saro Over a year ago

thanks,your solution definitely is the correct answer to the question in title, but for me beside the import problem there was a problem with semantic-ui build also, so I rebuild it based on solution on this link and now importing it the way you described above works fine

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related