Error importing css in vue js single file component

2
votes

I am trying to import 2 css files in style tag of my vue js single file component. 

<style >
    @import '../assets/styles/jquery-ui.js.css';
    @import '../assets/styles/jquery-ui.css';
</style>

but the is throwing error saying:

ERROR Failed to compile with 1 errors
9:28:42 AM

error in ./src/components/Attend.vue

Syntax Error: Unclosed string

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5d10c7ca","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Attend.vue 4:14-308 13:3-17:5 14:22-316 @ ./src/components/Attend.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

1
javascriptvue.jsvuejs2

1 Answers

0
votes

Base on webpack, after compiling all the files inside your assets folder will be pack into static folder. Therefore when you import files/css/images in your component, your relative path is '../static/styles/jquery-ui.js.css'.

Therefore your code should be like this:

<style >
    @import "../static/styles/jquery-ui.js.css";
    @import "../static/styles/jquery-ui.css";
</style>