CODEWITHSUNDEEP
node.jsjquery-uinpmwebpack
John Mee
John Mee

Reputation: 52313

How to theme jquery-ui with npm and requires?

Is it possible to theme jquery-ui via npm?
Or do we still have to go through the download builder?

The jquery-ui package has the default theme included at:
./node_modules/jquery-ui/themes/base/*.css.

If we require('jquery-ui') that won't load any css styling as well, right?

Do we need to require('./jquery-ui/themes/base/all.css')?
Or is there a better way?

Upvotes: 4

Views: 2075

Answers (2)

josemigallas
josemigallas

Reputation: 3918

To use a jquery-ui component from node_modules you need to import all JS and CSS. For example I use sortable in my webpack/typescript project like this:

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({ ... })

Similarly with 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')

Upvotes: 0

呂學洲
呂學洲

Reputation: 1413

  1. Is it possible to theme jquery-ui via npm?

    Yes, you can use jquery theme package (link).

    npm i jquery-ui-themeroller.

    And import it

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

    dot-luv is the name of theme.

    Here is official document, not only theme list also tool for customize theme.

    Remember to import jquery css file first require('./jquery-ui/themes/base/all.css')

  2. If we require('jquery-ui') that won't load any css styling as well, right?

    Yes, you should import require('./jquery-ui/themes/base/all.css'); to get the style file.

  3. Do we need to require('./jquery-ui/themes/base/all.css')?

    It is the simplest way to get all widgets style. But in most case we only need several widget.

    That say we want datepicker only, we should import css file by

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

    And now you can use your own theme in the end.

Upvotes: 3

Related Questions