Best Way to Have Global CSS in Vuejs

Best way to have global css in Vuejs

Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.

As comments below suggested if using webpack adding this to main.js works:

import './assets/css/main.css';

importing global css to VueJs does not load css to app bundle

You can import the CSS file in main.js. See the example below:

import Vue from 'vue';
import './assets/css/semantic.rtl.min.css';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app')

In build time your CSS file will be processed.

Global styling vs local styling in VueJS

Basically, every time you do an @import in your components it appends another copy to the main CSS file that Webpack generates.

Assuming you have the Webpack SCSS loader properly configured (which I believe you do since it compiles), you should be able to import the SCSS file once in your app.vue and the SCSS compiler will find it when it appends all other CSS.

For example, getting global fonts and mixins:

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
  @import "@/scss/mixins.scss";
</style>

Then create your CSS for each component inside the component's <style> section. Just make sure you add the lang="scss" so it all compiles.

You might also want to look into scss-resource-loader for Webpack. I think this is in the newest CLI builds, not sure about Nuxt.

How to prevent global css style from UI framework in Vue

I have been using element UI for 2 years, and I had the same problem. The thing in Element-UI styles is that they can be styled inside their own component.

Let's say for your case, you can style only the "el-table" by adding "custom class" to it and still can use scoped, but what's inside "el-table__body" cannot be styled when you use scoped.

And if you really want to style, remove "scoped" from "style", like this:

<style>
  .el-table__body{
    padding-top: 200px;
  }
</style>

Note: the above trick will apply the styles to all other tables when you come to this component and then open any other component which has the same "el-table__body" class.

To avoid the effect on other component's tables style, add a custom class name and then target the el-table__body.

For example:

<el-table
      :data="tableData"
      class="stack-table"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>

And CSS style target like this:

.stack-table .el-table__body{
   padding-top: 200px;
 }

Vue including global styles without repeating the styles for each component

In this scenario you do not need to worry about how webpacks CSS loaders are working.

You can simply go into your main.js and import '@/styles/globals.scss' to load the styles globally.

Nuxt: how to have css global styles in files rather than inside of a style tag

The css property is used for this exact purpose

Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page)

If you want to include it per page or component, include your styles in the <style> tag.

---

If you want them split into files, I guess that you could use extractCSS

export default {
  build: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true
    }
  }
}

---

Same question as yours as far as I understand: Nuxt.js: How move Global CSS from style tag to css file

Sharing common CSS across VueJS components

Vue makes this easy.

Solution

To use shared styles in a component you can do this.

MyComponent.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import '@/scss/shared-styles.scss';
  @import 'styles.scss'; // this is the regular CSS used just by the component
</style>

Alternative

You can also import the shared CSS files in the component CSS file instead like below.

MyComponent.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import 'styles.scss';
</style>

styles.scss

@import '@/scss/shared-styles.scss'

// rest of your component CSS

Automatically import global styles

If you want certain styles to be available in ALL your components you can do this.

vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/global.scss";
        `
      },
    },
  },
}

---

Related Topics