vuejs2: strange chart look

Trying render chart billboard.js at vue.js2 package.json:
“billboard.js”: “^1.2.0”, “vue”: “^2.2.2”,

import: import {bb} from 'billboard.js'

Generate chart:

     var chartbb = bb.generate({
        bindto: '#bbChart',
        data: {
          columns: [
            ['data3', 300, 200, 160, 400, 250, 250]
          ],
          type: 'spline'
        }
      })

      setTimeout(function () {
        chartbb.load({
          columns: [
            ['data7', -130, -150, -200, -300, -200, -100]
          ]
        })
      }, 2000)

insert into code.vue: <div id="bbChart" ></div> And get this: Seems to that library it’s not correct import… There are no proper styling chart, axes, series.

Steps to check or reproduce

Any suggestions what I’m doing wrong? Maybe should import style.css? But how?

[rshingleton]

I often find that this is the case with packages that have css as part of the project. For these cases I include a scss file as part of my main project in webpack and do my imports there so they are globally scoped.

For example:

My webpack.config.js looks something like this:

const path = require("path");
const srcDir = path.resolve(__dirname);
const baseDir = path.resolve(__dirname, "..");
const pluginsConfig = require(path.resolve(baseDir, 'config/webpack.plugins.config.js'));
const rulesConfig = require(path.resolve(baseDir, 'config/webpack.rules.config.js'));

module.exports = {
    context: path.resolve(__dirname, ".."),
    entry: {
        index: [
            srcDir + '/src/main.js',
            srcDir + '/src/main.scss'
        ]
    },
    output: {
        filename: "vendor/js/vendor_dll.js",
        path: exportPath,
        library: "vendor_dll",
    },
    resolve: {
        modules: [
            path.join(__dirname, "..", "node_modules"),
        ],
        extensions: [".js", ".jsx", '.ts', '.vue',],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        }
    },
    plugins: pluginsConfig,
    module: {
        rules: rulesConfig
    }
};

And in my main.scss file: (note that ~ resolves to the node_modules directory)

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
@import '~buefy/lib/buefy.css';
@import '~flatpickr/dist/flatpickr.css';
@import "~billboard.js/dist/billboard.css";

[ilya-vasilyev]

I added this into <style>...</style> section of my App.vue file:

@import "billboard.js/dist/billboard.min.css";

It works.