How to import jquery-ui css file with Vue3?

Question

I'm a beginner of typescript and VueJs. Currently, I tried to use jquery-ui with Vue3+Typescript+Electron.

I finally created working sample above environment. Then I tried to use jquery-ui resizable API. But it requires to use css file. I googled vue and webpack, how to import css, however there are many ways to import css file. So, I can't understand how to import css files in Vue's component file.

I refer following article:

import jQuery-ui and jQuery with npm install

My code is like following:

import $ from "jquery";
import "jquery-ui";

import 'jquery-ui/themes/base/theme.css'  // <== here comes error
import 'node_modules/jquery-ui/xxx-theme.css'  // <== this also don't work
@import "~jquery-ui-dist/jquery-ui.theme.css"; // <== this is working, but no effect

before that I configured following things according to the site Vue.js x TypeScriptのプロジェクトでjQuery UIを使う:

// 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")
      }
    }
  }
};

hiropon · Accepted Answer · 2021-07-17 04:16:54Z

0

Finally, I could load css files with following procedure.

Add "jquery-ui-css" alias in vue.config.js. This enable vue to import css with import "jquery-ui-css";

    resolve: {
      alias: {
        // ref: https://github.com/jzaefferer/webpack-jquery-ui#using-resolvealias-to-simplify-imports
        // bind version of jquery-ui
        "jquery-ui": "jquery-ui-dist/jquery-ui.js",
        "jquery-ui-css": "jquery-ui-dist/jquery-ui.css",
        // bind to modules;
        modules: path.join(__dirname, "node_modules")
      }
    },

In the vue component, import required modules.

<script lang="ts">
import $ from "jquery";
import "jquery-ui";
import "jquery-ui-css";

answered Jul 17, 2021 at 4:16

hiropon

1,8324 gold badges22 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

How to import jquery-ui css file with Vue3?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related