How/where I can import sass/css/less files ?

[netanelwebzi]

Hey

I installed from example bootstrap from npm.
Then I want to import the bootstrap css/less files and I cant understand where.
When I try to import it in app.js file I get an error that I dont have relevant loader.

So can you explain how I need to import global modules css/sass/less in the project ?

[atinux]

Hi!

Could you provide me your app.js file please?

I believe you should import your less files inside App.vue

[netanelwebzi]

@Atinux
Thats the App.vue file
`

`

Thats app.js file

import Vue from 'vue'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'
sync(store, router)

import App from './App.vue'
const app = new Vue({
router,
store,
...App
})

export { app, router, store }

In the app.js file I try to add something like this:

import 'bootstrap/less/bootstrap.less

or even css file

import 'bootstrap/dist/css/bootstrap.css

and when I run it I get console error:

ERROR in ./~/bootstrap/less/bootstrap.less
Module parse failed: /home/webninja101/Documents/vue-playground/ivsense/node_modules/bootstrap/less/bootstrap.less Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.

Can you give me code snippet for thats to work and where to put that ?

[atinux]

Ok, in your App.vue file, you should be able import bootstrap like this:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template> 

<style src="bootstrap/less/bootstrap.less" lang="less"></style>

Think about installing the less and less-loader:

npm install --save-dev less less-loader

It's better to import it via the .vue file for extracting it for production 🚀

[bisht-richa]

I need help for vue translation + gettext .

[2rohith2]

@Atinux
I am facing the same issue of importing LESS as global in my project.
I tried including my LESS file in App.vue but when I try to use the variable from my LESS file in any Vue file, that css is not applied.

Any inputs for this.

[atinux]

You need to create a variables.less file and import it in your Vue components @2rohith2