如何用sass导入jquery ui主题

时间:2015-04-20 08:42:32

标签: jquery-ui sass bower

我正在尝试将jquery UI主题导入到我的主app.css中。这是迄今为止所做的:

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

我在grunt的sass任务看起来像这样:

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',

                    ]
                }
            }
        },

然而,当这个编译时,没有一个jquery ui css类被选中。我的sass版本是:

Sass 3.4.13 (Selective Steve)

有人可以建议如何使用jruery UI与grunt / sass?

2 个答案:

答案 0 :(得分:0)

由于没有任何回复,谷歌搜索不是很有帮助,我最终这样做了:

'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');

生成_jquery-ui.scss,然后将其添加到app.scss中:

@import "jquery-ui";

同样在package.json中,请务必添加:

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

#npm install

答案 1 :(得分:0)

我所做的只是在symfony项目中的screen.scss文件中导入css文件,如下所示:

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

并且有效。