jquery - 如何使用 webpack 添加 jquery-ui css/图像

Question

我将 jquery-ui 与 webpack 一起使用，但在如何从 node_modules 文件夹加载捆绑的 css 和图像方面遇到问题。

我有自己的 scss 文件，但还需要加载 jquery-ui css。为了完成此任务，我添加了以下 webpack 配置规则。

{
    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
    }]
}

注意版本:

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

在我的 js 入口文件中下一步:

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

但是在构建时这给出了:

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)

所以我想我需要一些额外的 png 加载器: { 测试:/.png$/, 包括: [ path.resolve(__dirname, "node_modules/jquery-ui/themes/base/images"), ], 使用: { 加载器:“url-loader?limit=100000” } } 但后来我遇到了这个我不想改变的政策:

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'".

这就是我现在所在的地方。我确实找到了一些其他关于如何执行此操作的示例，但它们大多来自早期对 webpack 不太友好的 jquery-ui 版本。任何建议表示赞赏。我怀疑有比我上面的尝试更好的方法吗？

Answer 1

上官方jquery-ui's page解释他们链接到 a github repository providing a minimal working example 的 npm 的用法如何使用 webpack 设置 jquery-ui。 我让它工作的方式(稍微调整存储库的指令)是 如下:

1. 安装了文件加载器模块(npm i -S file-loader)

2. 添加了以下规则:

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

所以基本上我处理 css、scss 和 jquery ui 所需的样式表的方式是(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'
    },
    ]
},

在我的应用程序的 js 文件中:

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