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

然而，在构建时，这给出了：

错误 ./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 出乎意料的人物＆＃39;�＆＃39; （1：0）

所以我想我需要一些额外的png加载器： { test：/. png $ /，包括：[ path.resolve（__ dirname，＆＃34; node_modules / jquery-ui / themes / base / images＆＃34;）， ] 使用： { loader：＆＃34; url-loader？limit = 100000＆＃34; } } 但后来我遇到这个政策，我宁愿不改变：

拒绝加载图片＆＃39;数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAQAAAADwCAMAAADYSUr5AAABDlBMV ... MDrH4y9V + CDsjWf1nOApn6L + F1gNV / F48BB4BR + zUwcIfzP / 8S / ZOlvFfuAAAAAElFTkSuQmCC＆＃39; 因为它违反了以下内容安全策略指令：＆＃34; img-src＆＃39; self＆＃39;＆＃34;。

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

Answer 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，scs和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');

如何使用webpack

1 个答案: