Dave Berning
Jan 6, 2018 · 2 min read

If you’re working with the Vue CLI and you’re trying to import global JS/CSS libraries, you’re not alone. Some solutions will tell you to just add the package with a require statement or an @import statement. That’s fine but there is a time and a place to use the @import statement in Vue and importing a global CSS library isn’t one of them. Instead, let’s use an ES6 ‘import’ statement.

…[T]here is a time and a place to use the @import statement in Vue and importing a global CSS library isn’t one of them.

What We Will Be Importing

We will be importing Bulma, the up-and-coming Flexbox CSS framework. I won’t get into too much detail about it here but it’s all based on Flexbox. It’s very easy to pick up and learn and requires less markup than Bootstrap.

What We Will Be Doing

For this, we will be creating an alias for our Bulma dependency. This will be very familiar to you if you read my other post about creating an alias for a React dependency.

For this, I’m assuming that you already have the Vue CLI installed. If not, it’s easy to install. Just run npm install -g vue-cli, vue init webpack my-project, and follow the prompts.

Creating the Alias

First, to add the dependency let’s use run the follow NPM command:

npm install bulma --save

After that is done, let’s dive into our build/webpack.dev.conf.js file and paste the following code right above the module object.

resolve: {
extensions: ['.css'],
alias: {
'bulma': resolve('node_modules/bulma/css/bulma.css'),
}
}

NOTE: If you want to use the SCSS file, there are additional steps you should take prior to this article.

Now that your alias is created, let’s import it into our src/main.js file. Importing the dependency here will allow it to be used across the entire application.

import bulma from 'bulma';

That’s it! Really.

Granted, you could just add the relative path to Bulma but this is much cleaner and easier to read. Plus, you now know how to create an alias’ in Webpack for Vue!

Thanks for reading. If this helped you at all, please share and follow me on Twitter!


Originally published at daveberning.io on January 6, 2018.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Dave Berning

Written by

Software Engineer from Cincinnati. I work on JavaScript apps with Vue.js. Writer for Alligator.io, Front End Weekly, and organizer of the #CodePenCIN meetup.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade