Having trouble importing a CSS file into a Vue.js single file component?

I am attempting to include 2 CSS files within the style tag of my Vue.js single-file component.

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

However, I am encountering an error that says:

ERROR Failed to compile with 1 error
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

javascriptvue.jsvuejs2

Answer №1

Using webpack, all files within the assets folder are compiled and placed into a directory called static. This means that when you import files, CSS, or images in your component, the relative path should be 

'../static/styles/jquery-ui.js.css'
.

Therefore, your code should look like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a sanity issue while attempting to execute vercel build: sanity/..page.jsx lacks a root layout. To resolve this issue, ensure that each page includes a root layout

While my project runs smoothly locally, I encounter issues when trying to deploy it on Vercel. The error message reads: ⨯ sanity/[[...index]]/page.jsx doesn't have a root layout. To resolve this issue, ensure that every page has a root layout. Comp ...

javascriptreactjsnext.jssanity

Experiencing difficulties coding SVGs

Struggling with manipulating SVGs in JavaScript and looking to extend a line by clicking a button? Check out this code snippet I've included in the head tag: <script type="text/javascript"> x=135; y=135; var container = document.getElementById( ...

javascriptsvg

Designing a Vue 3 JS component that showcases a collection of attributes for a movie catalog

I am aiming to utilize the movie_properties in order to store various details such as movie id, name, genre, comingSoon status, availability, thumbnail, and preview. It's important to note that I am working with an API call that contains all this inf ...

javascriptvue.js

Angular HttpClient not recognizing hashtag

I'm trying to make a REST API call, but running into issues with the developerId parameter being sent incorrectly: let developerId = "123#212"; let url = \`\${Constants.BASE_URL}\${marketId}/developers/\${developerId}\`; retur ...

javascriptangulartypescripthttpclient

The `mounted()` hooks in a VuePress site are not triggered when the `vuepress build` command is used with the `--debug` option, although they work properly when using `vuepress dev`

UPDATE: Initially, I believed that the issue was caused by the custom theme; however, I have since revised the question. The live demo has also been fixed. I have developed a customized theme for VuePress by extending the @vuepress/theme-default with some ...

javascriptvue.jswebpackvuepress

Ways to showcase a website within an HTML document using a URL?

Is it possible to show 2 webpages on a single aspx webpage? For instance, When a user opens the link for www.mywebsite.com, I would like to display both www.google.com and www.bing.com on my homepage. Behind the scenes, I will call two separate URLs an ...

javascripthtmlcssasp.net

Utilizing CSS and Tailwind with either flexbox or grid to showcase repeated information in a layout of three rows

For a school project, I am exploring the use of CSS and Tailwind to enhance my learning. My task involves displaying data using a loop in Vue. The challenge is that this data needs to be presented in rows of 3, 2, and 3 in desktop view, while appearing sta ...

cssvue.jstailwind-css

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive ...

javascriptjqueryhtmlcss

A simple way to verify which option has been chosen has been altered

I am examining the code snippet below: <select class="select" id="choice-item" aria-invalid="false"> <option value="#opt0" selected="selected">32 bits</option> <option value="#opt1">64 bits</option> </select> M ...

javascriptjquery

Kendo UI Web - MultiSelect: choosing an option multiple times

Currently, I am encountering an issue with the Kendo UI MultiSelect widget when trying to select an option multiple times. An example of this is shown in the image below where I want to choose Schindler's List again after selecting The Dark Knight. Ho ...

javascriptjquerywebkendo-uikendo-multiselect

Implement a FOR loop in conjunction with an AJAX request

My goal is to send an AJAX request with multiple form fields and use an array for validations. I would like to also pass these values via AJAX: Although I haven't used a for loop in JavaScript before, it looks familiar. The current approach of the l ...

javascriptajaxjqueryloopsfor-loop

What is the process for adjusting settings through selected options in a pop-up menu?

Here are the choices available: <form> <select id="poSelect" > <option selected disabled>Choose here</option> <option id="buyeroption" value="100101">I am a Buyer</option> ...

javascriptjqueryhtmlcss

Identifying the language of characters written in English, Vietnamese, or Myanmar

My website is designed to support three languages - English, Vietnamese, and Myanmar. Users can submit content in any of these languages, and their submissions are stored in the database. When the content is displayed, I need to determine the language in w ...

javascripthtmlcssfonts

Successful execution occurring prior to beforeSend in a Cordova iOS application utilizing jQuery Ajax

After making some changes to the HTML of the login button, I encountered an issue where the alert was being triggered before the button's HTML had updated when testing on my iPhone using a Cordova-built app. Strangely, this problem did not occur when ...

javascriptjqueryiosajaxcordova

Issue with Vue3: The imported module is not defined

Update: I recently downgraded vue-cli to version 4.5.19 and now the code is functioning properly. It seems like there might be an issue related to vue-cli or its dependencies. I encountered a problem while working on a simple vue.js project using vue-cli. ...

javascriptnode.jsvue.jswebpackvuejs3

Retrieve highlighted text along with its corresponding tag in ReactJS

my <span class="highlight">highlighted</span> word The text above is showing an example including HTML tags. However, when using window.getSelection(), only the text "my highlighted word" is returned without the surrounding <span& ...

javascripthtmlreactjstypescriptreact-native

Conceal the navigation bar when scrolling to the top of the

Hey there! I'm looking for a way to hide my navigation bar when not scrolling, and then display it again once I start scrolling. Currently, I have two menus on this website: one with a white background and the other with a blue background. You can fi ...

javascriptjqueryhtmlcss

NPM is currently malfunctioning and displaying the following error message: npm ERR! 404

When running npm update -g, the following error occurs: npm ERR! code E404 npm ERR! 404 Not found : default-html-example npm ERR! 404 npm ERR! 404 'default-html-example' is not in the npm registry. npm ERR! 404 You should bug the author to publi ...

javascriptnpmeslint