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

Question

我是 typescript 和 VueJs 的初学者。目前，我尝试将 jquery-ui 与 Vue3+Typescript+Electron 一起使用。

我终于在上面的环境中创建了工作示例。然后我尝试使用jquery-uiresizableAPI。但它需要 uires 才能使用 css 文件。我用谷歌搜索了 vue 和 webpack，如何导入 css，但是有很多方法可以导入 css 文件。所以，我无法理解如何在 Vue 的组件文件中导入 css 文件。

我参考了以下文章：

我的代码如下：

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

在此之前，我根据站点 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"
      ]
    },
    ...

安装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

最后，我可以使用以下过程加载 css 个文件。

在vue.config.js中添加“jquery-ui-css”别名。这使 vue 可以导入 css 和 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")
      }
    },

在vue组件中，引入required模块。

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

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

How to import jquery-ui css file with Vue3?

jquery

typescript

vue.js

electron