Proper way of adding CSS file in Vue.js Application

Question

What is the proper way of adding external CSS file in Vue.js Application ?

I found several ways to add CSS file in Vue.js Application.

Some one suggest to use this one. <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">.

Some one suggest this one

<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>

Some one suggest this one

require('./assets/layout3/css/layout.min.css')

Some one suggest to use below code in webpack.config.js.

{
    test: /\.(css|less)$/,
    use: [{
         loader: "style-loader" // creates style nodes from JS strings
    }, {
         loader: "css-loader" // translates CSS into CommonJS
    }, {
         loader: "less-loader" // compiles Less to CSS
    }]
  }

Some one suggest to use this one

<style src="../node_modules/vue-multiselect/dist/vue-multiselect.min.css"></style>

What are the merits and demerits of using all those ways ?

I would like to use in a way so that all CSS files become a single file at the time of deployment. So that my application loads faster.

zcoop98 · Accepted Answer · 2021-10-10 23:31:44Z

9

Install sass

npm install sass-loader --save-dev

Create new css directory under your src/assets directory
Create a styles.scss file in the new css directory
Add the following line of code to your main.js file

import '../src/assets/css/styles.scss';

In the styles.scss file you can import multiple css files.

@import '~bootstrap/scss/bootstrap.min.css';
@import './common.css';

You can also write regular CSS properties like this in the same file

body {
  background: gray;
}

div {
  font-weight: bold;
}

Restart your dev server

npm run serve

edited Oct 10, 2021 at 23:31

zcoop98

3,2852 gold badges26 silver badges38 bronze badges

answered Apr 10, 2019 at 9:35

Hardik Raval

3,6911 gold badge29 silver badges31 bronze badges

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

Comments

Paul · Accepted Answer · 2018-06-19 13:56:49Z

1

The best way for me(!) in Vue.js is to include global page-styles in my main index.html with a link tag. This way they are accessible from everywhere and are loaded when the page is first opened. Like this: index.html:

<link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">

The style-rules for my components are inlined in .vue-files using: mycomponent.vue:

<style scoped>
...
</style>

EDIT:

If you don't want to use .vue files and work with .js files you can not scope the css inside components. If thats the case I always name them the same as the component and also include it inside index.html in link tag.

answered Jun 19, 2018 at 13:56

Paul

15815 bronze badges

2 Comments

abu abu Over a year ago

Thanks @informant09. I have several style sheets. Should I include them using several <link> tag ?

Paul Over a year ago

Yes one Link Tag for each style. Feel free to Post your changes.

Collectives™ on Stack Overflow

Proper way of adding CSS file in Vue.js Application

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related