Menu
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.
464
css in the src/assets directory. Files in this folder get processed by Webpack. This means we can use CSS pre-processors (like SCSS) or post-processors (like PostCSS).
Include CSS file in one component If you want to include the external CSS file in only one component you can import it in the <style></style> tag. For example, we want to include Bootstrap 4 CSS file in a single component. It will only work for that component.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
You have SCSS variables in one file that you want to make available to your Vue components. The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue's single file components you can simply add lang="scss" to the <style> block ( docs).
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;
}
npm run serve
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
