代码之家 › 专栏 › 技术社区 › Trip

Webpack | jQuery UI=>未加载图标集的相对图像URL

webpacker loader webpack jquery-ui javascript

0

Trip · 技术社区 · 5 年前

ERROR in ./app/javascript/packs/admin.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './images/ui-icons_444444_256x240.png' in '/Users/trip/Sites/the_website/app/javascript/packs'

源于jQueryUI中的此代码段

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}

现在,我可以通过手动复制并将这些文件的副本移动到我的网页的入口点来解决这个问题。 public_output_path 是

我的网页包配置:

    rules: [{
      test: /\.(css|less|scss|sass)$/i,
      include: /node_modules/,      
      exclude: [
        /\.module\.(css|less)$/,
        /\.(config|variables|overrides)$/ 
      ],
      use: [
        MiniCssExtractPlugin.loader,
        {loader: 'css-loader'},
        {loader: 'postcss-loader'},
        {loader: 'resolve-url-loader'},
        {loader: 'less-loader'},
        {loader: 'sass-loader', options: {implementation: require('sass')}},
      ],
    },
...
    {
      test: /\.(jpg|jpeg|png|gif)$/i,
      use: [{
        loader:  'file-loader',
        options: {
          name: isProduction ? '[name]-[hash].[ext]' : '[name].[ext]'
        },
      }],
    }, {
...
  resolve: {
    alias: {
      'jquery-ui'   : 'jquery-ui-dist/jquery-ui',

然后它从这里被称为 管理员.scss :

@import 'jquery-ui/themes/base/all.css';

任何知道我可能做错了什么吗?有什么要调查的吗?所有评论/问题/俳句欢迎:)

0 回复 | 直到 5 年前