title: Proper way of adding CSS file in Vue.js Application
body: <p>What is the proper way of adding external CSS file in Vue.js Application ? </p>
  
  <p>I found several ways to add CSS file in Vue.js Application.</p>
  
  <p>Some one suggest to use this one. <code>&lt;link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css"&gt;</code>.</p>
  
  <p>Some one suggest this one </p>
  
  <pre><code>&lt;style lang="scss"&gt;
  @import 'src/assets/css/mycss_lib.css';
  &lt;/style&gt;
  </code></pre>
  
  <p>Some one suggest this one</p>
  
  <p><code>require('./assets/layout3/css/layout.min.css')</code></p>
  
  <p>Some one suggest to use below code in <code>webpack.config.js</code>.</p>
  
  <pre><code>{
      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
      }]
    }
  </code></pre>
  
  <p>Some one suggest to use this one</p>
  
  <pre><code>&lt;style src="../node_modules/vue-multiselect/dist/vue-multiselect.min.css"&gt;&lt;/style&gt;
  </code></pre>
  
  <p>What are the merits and demerits of using all those ways ?</p>
  
  <p>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.  </p>