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.

Answer 1

1. Install sass

npm install sass-loader --save-dev

2. Create new css directory under your src/assets directory

3. Create a styles.scss file in the new css directory

4. 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;
}

5. Restart your dev server

npm run serve