CSS frameworks are useful tools that can help speed up prototyping and development. There are multiple ways to import them into a Vue application depending on what you need to achieve.

Bulma framework is used in the following examples so make sure to install Bulma first by running npm i bulma.

Check out the example project on GitHub.

1. Simple import

Using App.vue

<style lang="scss">
@import "~bulma/bulma";
</style>

Using main.js

import "bulma";

// ...
// new Vue({

Both ways will give the same result - framework with no customization rendered to CSS which can be used throughout your application.

2. Import and customize

Some frameworks allow customization by overriding variables, which have to be defined before the framework is imported.

Create variables.scss inside src/assets/style:

$primary: #ff4455; // override default primary color

Using App.vue

<style lang="scss">
@import "@/assets/style/variables.scss"; // import variables before importing the framework
@import "~bulma/bulma";
</style>

Using main.js

Alternative is to create a separate main.scss in src/assets/style and import it in main.js:

// main.js

import "@/assets/style/main.scss";

// ...
// new Vue({

// main.scss

@import "variables";
@import "~bulma/bulma";

Note: “~” indicates node_modules and “@” indicates src directory.

3. Advanced import

In case you want to customize the framework, and re-use its variables and mixins in your custom styles, you will have to configure the CSS loader to import the framework globally before rendering it to CSS.

Create variables.scss inside src/assets/style:

$primary: #ff4455; // override default primary color

CSS loader configuration

Edit (or create) vue.config.js in the Vue project root folder to add css.loaderOptions configuration:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 'data' instead of 'prependData' if using sass-loader < v8.0.0
        prependData: `
            @import "@/assets/style/variables.scss";
            @import "~bulma/sass/utilities/_all";
          `
      }
    }
  }
};

Warning: Do not import the whole framework here! CSS Loader is supposed to only include code that doesn’t generate CSS directly. If you do, every time you use a scoped style in a component, a copy of the whole framework will be appended to the output.

Importing the rest of the framework

Using App.vue

<style lang="scss">
@import "~bulma/bulma";
</style>

Using main.js

// main.js

import "@/assets/style/main.scss";

// ...
// new Vue({

// main.scss

@import "~bulma/bulma";

Using mixins and variables

Now framework utilities are globally available and can be used in components or in separately imported files:

.mixin-and-variable-example {
  @include touch {
    color: $success;
  }
}

Full advanced import example project is on GitHub.