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

Posted 2023-05-08

【中文标题】如何使用 webpack 添加 jquery-ui css/图像

【英文标题】：How to add jquery-ui css/images with webpack

【发布时间】：2017-12-31 05:10:39

【问题描述】：

我正在使用 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");

但是在构建时会给出：

错误 ./node_modules/jquery-ui/themes/base/images/ui-icons_777620_256x240.png 模块解析失败： /home/anders/Code/imjustworking/node_modules/jquery-ui/themes/base/images/ui-icons_777620_256x240.png 意外字符 '�' (1:0)

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

拒绝加载图片 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAADwCAMAAADYSUr5AAABDlBMV…MDrH4y9V+CDsjWf1nOApn6L+F1gNV/F48BB4BR+zUwcIfzP/8S/ZOlvFfuAAAAAAElFTkSuQmCC' 因为它违反了以下内容安全政策指令： “img-src 'self'”。

这就是我现在的位置。我确实找到了一些其他的例子来说明如何做到这一点，但它们主要来自早期的 jquery-ui 不太友好的 webpack 版本。任何建议表示赞赏。我怀疑有比我上面的尝试更好的方法吗？

【参考方案1】：

在官方 jquery-ui's page 上解释了 npm 的用法，他们链接到 a github repository providing a minimal working example 以了解如何使用 webpack 设置 jquery-ui。 我让它工作的方式（稍微调整存储库的说明）是 如下：

安装了 file-loader 模块 (npm i -S file-loader)

添加了以下规则：

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