I am new to TypeScript and VueJs. Recently, I decided to incorporate jquery-ui into my project using Vue3, TypeScript, and Electron.
After some trial and error, I was able to successfully set up the environment. However, when I attempted to use the jquery-ui resizable API, I encountered an issue with importing the required CSS file. Despite researching methods for importing CSS files in Vue components using Vue and webpack, I found multiple approaches which left me confused.
One of the articles I referred to was:
- import jQuery-ui and jQuery with npm install
My code snippet looks like this:
import $ from "jquery";
import "jquery-ui";
import 'jquery-ui/themes/base/theme.css' // <== encountering error here
import 'node_modules/jquery-ui/xxx-theme.css' // <== this also doesn't work
@import "~jquery-ui-dist/jquery-ui.theme.css"; // <== this works, but has no effect
Prior to this, I followed the configuration steps outlined in the following site Using jQuery UI in a Vue.js x TypeScript Project:
// install jquery, jquery-ui and typescript one
$ npm install jquery jquery-ui --save
$ npm install @types/jquery @types/jqueryui --save-dev
// tsconfig.json
{
"compilerOptions": {
...
"paths": {
"@/*": [
"src/*"
],
"jquery-ui": [
"node_modules/@types/jqueryui/index"
]
},
...
- install jquery-ui-dist
$ npm install jquery-ui-dist --save
// vue.config.js
const path = require("path");
module.exports = {
configureWebpack: {
devtool: "source-map",
optimization: {
minimize: false
},
resolve: {
alias: {
// bind version of jquery-ui
"jquery-ui": "jquery-ui-dist/jquery-ui.js",
// bind to modules;
modules: path.join(__dirname, "node_modules")
}
}
}
};