Vue-loader: 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.

[tatsujb]

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]

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]

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]

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

[work1000]

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]

is good workaround but how to load it scoped?
Its seems does not work.

[equinusocio]

@GanchoDanailov Import it inside the style tag:

<style lang="postcss" scoped>
  @import '~/file.pcss';
</style>

[nineSean]

@equinusocio
But file.pcss will be global, how can I import style file and use locally?

[equinusocio]

@nineSean No, there is the scoped attribute. To import the file you must use postcss-easy-import or postcss-advanced-variables (recommended) plugins.

[yarcowang]

This does't work for me, when someone said scss also works in the stackoverflow post

I'm wondering the right way on to do this...

[camslice]

The issue as far as I can tell, is that the data-v-### attributes are not being added to the HTML for scoped CSS that is added via a src attribute, or using @import.

Both scenarios successfully modify the CSS selectors, from .a { foo: bar; } to .a[data-v-###] { foo: bar; }. You can inspect the contents of the resulting <style/> tags in the output HTML. However neither technique adds data-v-### attributes to the HTML.

1. Without any additional postcss plugins:

<style scoped src="@/file.css"></style>

I found that the @/ is a required prefix.

2. As @equinusocio mentioned, this technique requires a postcss plugin like postcss-easy-import or postcss-advanced-variables

<style scoped>
    @import '~/file.css';
</style>

But again, neither technique 1. or 2. result in the HTML being updated with the appropriate data-v-### for the scoped CSS to target.

3. Interestingly, the data-v-### attributes are correctly added to HTML for scoped CSS inside this <style> that is _not_ imported:

<style scoped>
    @import '~/file.css';

    .b {
        dogs: cats;
    }
</style>

So any HTML tags with class="b" will get the data attribute, but none of the HTML that is targeted inside the imported file will get the data attributes. 🤔

[camslice]

Edit/note: My previous assertion that the data-v-### attributes are not being added to the HTML for scoped CSS that is added via a src attribute, or using @import is _not correct_.

I'm leaving my previous comment there, along with this clarification, in case others run into a similar problem and find it useful.

The issue I'm facing is that the imported CSS is only scoped to the current component — as it should be, by design — so child components are not inheriting the styles. Will require some processing to prefix all the selectors in the imported library with a context selector, eg: #parent so that the CSS can properly cascade to HTML inside the child components.

The result should be more like #parent[data-v-###] a { foo: bar; } which will result in all child HTML elements in all child components being matched by the rule. As mentioned here: https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind

[ImsirovicAjdin]

Why complicate? Inside the style tag in App.vue:

@import "https://unpkg.com/[email protected]/build/pure-min.css";

It's an easy one-liner.

[negativems]

@import style not working with scoped style.
The <style scoped> tag not affect to the style imported with @import.

If you @import a style which contains for example body { background-color: red; } and you goes to another component you will see the body red.