How to include external css library

[swamikevala]

I'm unable to figure out how to include the Pure.css external css library into my projects. I have added css loader to my webpack conf:

{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},

and requiring it my main.js file:

import purecss from 'css!./assets/css/pure-0.6.0/pure-min.css'

but I'm not able to get it to work. Any help would be much appreciated

[taylorzane]

Are you getting an error or is the CSS simply not showing up? My first thought would be to remove the css! from your import string. The test that you put in your webpack config will handle the stylesheet properly, when you specify css! webpack assumes you meant to override the default behavior.

[rbvea]

You could just link it as a style tag

<style src="/assets/css/pure-0.6.0/pure-min.css">

[transtone]

try
var purecss = require('css!./assets/css/pure-0.6.0/pure-min.css')

[jyjunyz]

you can try it like this:
import './assets/css/pure-0.6.0/pure-min.css'

[nueverest]

I put this inside of index.html:

<link rel="stylesheet" type="text/css" href="/assets/css/pure-0.6.0/pure-min.css">

It works, but strangely I get a 404 if I try to navigate here: /assets/css/pure-0.6.0/pure-min.css. Maybe I need to configure a url router.

Only the import method from @jyjunyz removes all error messages I've seen.

However, importing CSS via javascript could result in dependency errors that are annoying to debug. Let's say I have a big project and place import './assets/css/pure-0.6.0/pure-min.css' inside main.js and one of the *.vue component files. Now I comment out the css import statement inside of main.js, but the styling remains. The reason is that the same import is still living in a component.

[kristianmandrup]

I have a library css-circle-menu I installed via npm. It includes css in node_modules\css-circle-menu/css/circle-menu.css

I tried using <style src="node_modules/css-circle-menu/css/circle-menu.css"></style> in my src/circle-menu.vue file, but I'm told it could't resolve it correctly. So I had to give it a relative path:

<style src="../node_modules/css-circle-menu/css/circle-menu.css"></style>

Now it works ;)

[LinusBorg]

this should also work:

<style src="css-circle-menu/css/circle-menu.css"></style>

[kristianmandrup]

Thanks :) Much better!

[kristianmandrup]

@LinusBorg How can I make it include a SASS file which is dynamic with respect to my props.
I'd like to make the SASS variables/calculations reflect the number of items in my menu :)

[LinusBorg]

That't not possible. CSS/SASS is created at build time, your props are only available later during runtime in the browser.

[kristianmandrup]

So I guess the only way would be to either pre-generate for various combinations or better to use dynamic styles like in React

[jameskandau]

if using webpack try this : require('./assets/css/bulma.css') am using bulma

[jameskandau]

Else add it to the static folder then add it to the index.html

[mchikhaoui]

@nueverest are you using vue-router without history mode ?
I have resolved it by setting vue-router mode to history.