CODEWITHSUNDEEP
jquery-uisassbower
Shrouk Khan
Shrouk Khan

Reputation: 1460

how to import jquery ui theme with sass

I am trying to import jquery UI theme into my main app.css . This is what has been done so far:

bower.json

{
  "name": "Softverk Webportal",
  "dependencies": {
    "jquery": "~2.1.1",
    "jquery-ui":"~1.11.4",  
  },
  "resolutions": {
    "jquery": "~2.1.1",
  }
}

_jquery_ui.scss

@import url("../../../assets/bower_components/jquery-ui/themes/base/all.css");

app.scss

@import "jquery_ui";

And my sass task in grunt looks like this:

sass: {
            options: {
                includePaths: [
                    'assets/bower_components/jquery-ui/themes/base',
                ]
            },
            dist: {
                options: {
                    outputStyle: 'compressed',
                    sourceComments: 'map',
                    sourcemap: 'file'
                },
                files: {
                    'assets/css/app.min.css': [
                        settings.template.path + 'scss/app.scss',

                    ]
                }
            }
        },

However, when this compiles, none of the jquery ui css classes picked up . my sass version is:

Sass 3.4.13 (Selective Steve)

Can anyone suggest how to use jquery UI with grunt / sass ?

Upvotes: 1

Views: 4605

Answers (2)

Razvan.432
Razvan.432

Reputation: 663

What i did is simply import css file in my screen.scss file in a symfony project like this:

@import "../../../../../bower_components/jquery-ui/themes/vader/jquery-ui.css";

and it worked.

Upvotes: 1

Shrouk Khan
Shrouk Khan

Reputation: 1460

Since there wasn't any response and google search was not very helpful, i ended up doing this:

'sass-convert': {
        /**
         * NOTE: make sure to change the images to something like this:
         * background-image: url("images/ui-icons_444444_256x240.png") --> background-image: url($template-path +"images/ui-icons_444444_256x240.png");
         * */
        options: {
            from: 'css',
            to: 'scss'
        },
        files: { ///home/khan/www/softverk-webportal-remaxth/assets/bower_components/jquery-ui/themes/base
            cwd: 'assets/bower_components/jquery-ui/themes/base/',
            src: 'jquery-ui.css',
            filePrefix: '_',
            dest: settings.template.path + 'scss/'
        }

    },


grunt.registerTask('default', [ 'sass-convert');

Which generates _jquery-ui.scss , which was then added to app.scss like this:

@import "jquery-ui";

Also in package.json , make sure to add:

"grunt-sass": "~0.12.1",
"grunt-sass-convert":"~0.2.0",

#npm install

Upvotes: 1

Related Questions