How to include CSS file into app CSS? about keen-ui HOT 6 CLOSED

i am not a user of webpack, but i think the best way to go about it is to copy (i am using gulp) the css file to your public/asset folder.

from keen-ui.

Yeah, what @athikrishnan said. Also, if you're using a preprocessor like Stylus, you can import the CSS file like so:

@import '~keen-ui/dist/keen-ui.css';

from keen-ui.

Thanks.

from keen-ui.

I got it working by using import 'keen-ui/dist/keen-ui.css' with Webpack (using the official template) in main.js:

import Vue from 'vue'
import Keen from 'keen-ui'
import 'keen-ui/dist/keen-ui.css'

Vue.use(Keen)

However, styles aren't applied because they don't match. CSS is using class names, HTML is using custom tags:

.ui-alert {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  ...
}

<ui-alert type="warning">
  Ay caramba! Alerts can also contain HTML. <a href="https://google.com" target="_blank">Click here</a> for Google.com.
</ui-alert>

What am I missing?

from keen-ui.

Answering to myself, this works (notice the : before the attribute):

<ui-alert :type="warning">
  Ay caramba! Alerts can also contain HTML. <a href="https://google.com" target="_blank">Click here</a> for Google.com.
</ui-alert>

The output HTML becomes:

<div class="ui-alert" _v-10f2d0f9="">
    <div class="ui-alert-body ui-alert-toggle-transition info" role="alert">
        ....
    </div>
</div>

I guess it's the expected behavior!

Edit: actually, it's working when saving (with webpack hot reload: <div class="ui-alert">), but if I reload the page, the styles disappear (HTML looks like <ui-alert type="warning">). Weird... Any idea?

Edit 2: It seems that each component must import Keen UI elements:

<template>
  <div id="app">
    <ui-toolbar title="Inbox">
      <div slot="actions">
        <ui-icon-button type="clear" color="black" icon="arrow_back"></ui-icon-button>
        <ui-icon-button type="clear" color="black" icon="star_border"></ui-icon-button>
      </div>
    </ui-toolbar>
  </div>
</template>

<script>
import Keen from 'keen-ui'

const App = Vue.extend({
  components: {
    Keen.UiToolbar,
    Keen.UiIconButton
  },
  ...
})
</script>

In this configuration, no more need to import CSS (remove this line: import 'keen-ui/dist/keen-ui.css').

from keen-ui.

Solved by following #29

from keen-ui.