vue bootstrap sass integration issues

Question

I have created the vue app using webpack and now I'm integrating vue with boostrap-sass but the syntax error comes on I just dont understand why so

Following is my folder structure

router-app
   src
      assets
         scss
             styles.scss
   node_modules
       bootstrap-sass
            assets
                stylesheets
                    Bootstrap Folder
                    _bootstrap.scss

This is the error vue throws

ERROR  Failed to compile with 1 errors                                                                         14:10:35

error  in ./src/main.js

 Syntax Error: Unexpected token, expected ( (3:8)

 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
> 3 | @import 'assets/scss/styles.css';  //here's the issue
|             ^
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

In my styles.scss I have

   @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
   @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Can anyone let me know whether I'm going onto the right track or any where I'm going wrong any help is appreciated

Answer 1

how i did was

 1. in ur node module folder install bootstrap not bootstrap-sass

2.in main.js

  import './assets/scss/styles.css'; //point to the folder where ur scss and css sass files r kept

3.point out to scc bootstrap.scss file `

 @import "../../../node_modules/bootstrap/scss/bootstrap";`

compile the files

NOTE - I HAVEN'T ADDED LOADER TO WEBCONFIG THEIRS NO ANY NEED

and ur done cheers:)