How to add jquery-ui css/images with webpack -
i using jquery-ui webpack have problems regarding how load bundled css , images node_modules folder.
i have own scss files need load jquery-ui css. acomplish added following webpack config rules.
{ test: /\.scss$/, include: [ path.resolve(__dirname, "client/css/scss"), ], use: [{ loader: "style-loader" // creates style nodes js strings }, { loader: "css-loader" // translates css commonjs }, { loader: "sass-loader" // compiles sass css }] }, { test: /all\.css$/, include: [ path.resolve(__dirname, "node_modules/jquery-ui/themes/base"), ], use: [{ loader: "style-loader" // creates style nodes js strings }, { loader: "css-loader" // translates css commonjs }] }
note versions:
"jquery": "3.2.1", "jquery-ui": "1.12.1",
next in js entry file:
require("../css/scss/main.scss"); require("../../node_modules/jquery-ui/themes/base/all.css");
however on build 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 figured need additional loaders pngs: { test: /.png$/, include: [ path.resolve(__dirname, "node_modules/jquery-ui/themes/base/images"), ], use: { loader: "url-loader?limit=100000" } } run policy rather not change:
refused load image 'data:image/png;base64,ivborw0kggoaaaansuheugaaaqaaaadwcamaaadysur5aaabdlbmv…mdrh4y9v+cdsjwf1noapn6l+f1gnv/f48bb4br+zuwcifzp/8s/zolvffuaaaaaelftksuqmcc' because violates following content security policy directive: "img-src 'self'".
this im @ now. did find other examples of how earlier less webpack friendly versions of jquery-ui. advice appreciated. suspect there better ways attemptemts above?
Comments
Post a Comment