How to add jquery-ui css/images with webpack

Question

I am using jquery-ui together with webpack but have problems regarding how to load the bundled css and images from node_modules folder.

I have my own scss files but then also need to load the jquery-ui css. To acomplish this I added the following webpack config rules.

{
    test: /\.scss$/,
    include: [
        path.resolve(__dirname, "client/css/scss"),
    ],
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }]
},
{
    test: /all\.css$/,
    include: [
        path.resolve(__dirname, "node_modules/jquery-ui/themes/base"),
    ],
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }]
}

Note versions:

"jquery": "3.2.1",
"jquery-ui": "1.12.1",

Next in my js entry file:

require("../css/scss/main.scss");
require("../../node_modules/jquery-ui/themes/base/all.css");

However on build this gives:

ERROR in ./node_modules/jquery-ui/themes/base/images/ui-icons_777620_256x240.png Module parse failed: /home/anders/Code/imjustworking/node_modules/jquery-ui/themes/base/images/ui-icons_777620_256x240.png Unexpected character '�' (1:0)

So I figured I need some additional loaders for pngs: { test: /.png$/, include: [ path.resolve(__dirname, "node_modules/jquery-ui/themes/base/images"), ], use: { loader: "url-loader?limit=100000" } } But then I run into this policy I would rather not change:

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAADwCAMAAADYSUr5AAABDlBMV…MDrH4y9V+CDsjWf1nOApn6L+F1gNV/F48BB4BR+zUwcIfzP/8S/ZOlvFfuAAAAAElFTkSuQmCC' because it violates the following Content Security Policy directive: "img-src 'self'".

This is where Im at now. I did find some other examples of how to do this but they where mostly from earlier less webpack friendly versions of jquery-ui. Any advice appreciated. I suspect there are better ways to do this than my attemptemts above?

user_4609685 · Answer

On the official jquery-ui's page explaining the usage of the npm they link to a github repository providing a minimal working example of how to set up jquery-ui with webpack. The way I got it working (adapting the repository's instructions a bit) was as follows:

installed the file-loader module (npm i -S file-loader)

Added the following rule:

{
    test: /\.(jpg|png)$/,
    loader: 'file-loader'
},

So basically the way I handle my css, scss and the stylesheets required by jquery ui is (webpack.config.js):

module: {
    rules: [
    {
        test: /\.s*css$/,
        use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
    },
    {
        test: /\.(jpg|png)$/,
        loader: 'file-loader'
    },
    ]
},

And in my app's js file:

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");
require("jquery-ui/ui/widgets/selectmenu");
require("jquery-ui/ui/widgets/slider");
require('jquery-ui/themes/base/all.css');

How to add jquery-ui css/images with webpack

1 Answers