如何使用 Vue3 导入 jquery-ui css 文件？

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

Answer 1

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";