New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to include external css library #144

Closed
swamikevala opened this Issue Jan 25, 2016 · 21 comments

Comments

Projects
None yet
@swamikevala

swamikevala commented Jan 25, 2016

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

This comment has been minimized.

Contributor

taylorzane commented Jan 26, 2016

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

This comment has been minimized.

rbvea commented Jan 30, 2016

You could just link it as a style tag

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

@transtone

This comment has been minimized.

transtone commented May 20, 2016

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

@jyjunyz

This comment has been minimized.

jyjunyz commented Jun 3, 2016

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

@nueverest

This comment has been minimized.

nueverest commented Sep 9, 2016

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

This comment has been minimized.

kristianmandrup commented Oct 6, 2016

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 comment has been minimized.

Member

LinusBorg commented Oct 6, 2016

this should also work:

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

@kristianmandrup

This comment has been minimized.

kristianmandrup commented Oct 6, 2016

Thanks :) Much better!

@kristianmandrup

This comment has been minimized.

kristianmandrup commented Oct 6, 2016

@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

This comment has been minimized.

Member

LinusBorg commented Oct 6, 2016

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

@kristianmandrup

This comment has been minimized.

kristianmandrup commented Oct 6, 2016

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

@yyx990803 yyx990803 closed this Oct 13, 2016

@jameskandau

This comment has been minimized.

jameskandau commented May 5, 2017

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

@jameskandau

This comment has been minimized.

jameskandau commented Jun 7, 2017

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

@mchikhaoui

This comment has been minimized.

mchikhaoui commented Jun 22, 2017

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

@tatsujb

This comment has been minimized.

tatsujb commented Oct 24, 2017

everyone seems to love this answer : https://github.com/jyjunyz but I can't get it to work.
https://stackoverflow.com/questions/46907059/vue-js-and-scss-or-sass

@Erbolking

This comment has been minimized.

Erbolking commented Dec 3, 2017

You can also include external styles in webpack config:

  entry: {
    app: './src/main.js',

    'styles': [
      './node_modules/bootstrap/dist/css/bootstrap.min.css',
      './src/assets/css/design.css'
    ]
  },
@harrikrishnan

This comment has been minimized.

harrikrishnan commented Mar 14, 2018

convert sass into css using some loaders sass-loader, css-loader, node-sass. Then link the created file css to index html,
or import created css file in app.js using style-loader.

@ojaynico

This comment has been minimized.

ojaynico commented Oct 14, 2018

Don't forget to add rel="stylesheet" in your link tag

@work1000

This comment has been minimized.

work1000 commented Oct 16, 2018

for those who want to do the same thing for bootstrap css files i performed the following

  • npm i bootstrap-vue
  • included import BootstrapVue from 'bootstrap-vue' in entry point
  • npm install --save-dev style-loader css-loader - https://webpack.js.org/guides/asset-management/#loading-css
  • finally added import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' in entry point

my main.js looks like

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
@GanchoDanailov

This comment has been minimized.

GanchoDanailov commented Nov 6, 2018

<style src="file.css"></style> is good workaround but how to load it scoped?

Its seems <style scoped src="file.css"></style> does not work.

@equinusocio

This comment has been minimized.

equinusocio commented Dec 10, 2018

@GanchoDanailov Import it inside the style tag:

<style lang="postcss" scoped>
  @import '~/file.pcss';
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment