如何使用npm和requires来主题jquery-ui？

Question

是否可以通过 npm 为 jquery-ui 主题化？
或者我们仍然需要通过下载构建器？

jquery-ui 包 的默认主题包含在：

./node_modules/jquery-ui/themes/base/*.css

。

如果我们

require('jquery-ui')

也不会加载任何CSS样式，对吗？

我们需要

require('./jquery-ui/themes/base/all.css')

吗？
或者有更好的办法吗？

Answer 1

1. 是否可以通过 npm 为 jquery-ui 主题化？

   是的，您可以使用jquery主题包（链接）。

   npm i jquery-ui-themeroller

   .

   并导入它

   require('./jquery-ui-themes/themes/dot-luv/theme.css');

   dot-luv

   是主题名称。

   这里是官方文档，不仅有主题列表还有自定义主题的工具。

   记得先导入jquery css文件

   require('./jquery-ui/themes/base/all.css')

2. 如果我们

   require('jquery-ui')

   也不会加载任何CSS样式，对吗？

   是的，您应该导入

   require('./jquery-ui/themes/base/all.css');

   来获取样式文件。

3. 我们需要

   require('./jquery-ui/themes/base/all.css')

   吗？

   这是获取所有小部件样式的最简单方法。但大多数情况下我们只需要几个小部件。

   也就是说我们只想要

   datepicker

   ，我们应该通过
   导入css文件

   require('./jquery-ui/themes/base/core.css');
   require('./jquery-ui/themes/base/datepicker.css');
   

   现在您终于可以使用自己的主题了。

Answer 2

要使用 node_modules 中的

jquery-ui

组件，您需要导入所有 JS 和 CSS。例如，我在我的 webpack/typescript 项目中使用

sortable

，如下所示：

import $ from 'jquery'
import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/sortable.css'
import 'jquery-ui/themes/base/theme.css'
import 'jquery-ui/ui/widgets/sortable'

$('ol.sortable').sortable({ ... })

与nodejs类似：

var $ = require('jquery');
require('jquery-ui/themes/base/core.css')
require('jquery-ui/themes/base/sortable.css')
require('jquery-ui/themes/base/theme.css')
require('jquery-ui/ui/widgets/sortable')