How can external CSS files be properly added in a Vue.js Application?
I have come across multiple methods for adding CSS files in a Vue.js Application.
One suggestion is to use the following code:
<link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">Another suggestion involves using:
<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>
Some recommend using this method:
require('./assets/layout3/css/layout.min.css')Others advise adding the 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
}]
}
An alternative approach suggested by some is:
<style src="../node_modules/vue-multiselect/dist/vue-multiselect.min.css"></style>
What are the advantages and disadvantages of implementing these various methods?
I am looking for a way to consolidate all CSS files into a single file during deployment, thereby improving loading times for my application.