Error importing css in vue js single file component

Question

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

bennyxguo · Accepted Answer · 2018-12-29 05:24:01Z

0

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>

answered Dec 29, 2018 at 5:24

bennyxguo

8456 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ciasto piekarz Over a year ago

thanks can you also please help me with stackoverflow.com/q/53967042/3311276 .

Collectives™ on Stack Overflow

Error importing css in vue js single file component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related