如何在webpack中添加jquery-ui CSS/图像

Question

我有自己的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");

Answer 1

在解释npm用法的jquery-ui官方页面上，他们链接到一个github存储库，提供了一个如何使用WebPack设置jquery-ui的最小工作示例。我让它工作的方法（稍微调整一下存储库的指令）如下所示：

>

已安装文件加载器模块(NPM I-S文件加载器)

添加了以下规则：

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

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