1

Приветствую! Собираю проект и в какой то момент заметил, что svg изображения которые должны был быть загруженные url-loader'ом не отображаются.

к примеру отрывок less-файла:

#ajax-loader{background-image: url('~img/image.svg');}

img -- прописан в резолве и файл существует. если отключить url-loader -- то файл отобразится.

немного из конфига:

resolve: {
    alias: {
      root: __dirname+"/../src",
      img: __dirname+"../../src/images",
      lib: __dirname+"/../src/js/lib",
            modules: __dirname+"/../src/js/modules",
            elements: __dirname+"/../src/elements",
      acss: __dirname+"/../src/acss",
      vendors: __dirname+"/../src/vendors",
      assets: __dirname + up +"/assets/"
    },
        extensions:[".js"]
  },

loaders: [{
    test: /\.js$/,
    // include: "/\/src\//",
    loader: 'babel-loader',
    exclude: /(node_modules|bower_components|vendors)/,
    options: {
      presets: ["env","es2015"]
    }
  },//loader
  {
    test: /\.jade$/,
    loader: "jade-loader"
  },//loader
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
                {
                    fallback: "style-loader",
        use: "css-loader"
                }
            )
  },//loader
  {
    test: /\.less$/,
    loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader","less-loader"]
            })
  },//loader
  {
    test: /\.(png|jpg|svg)$/,
    use:[{
      loader: "url-loader",
      options:{
        exclude: __dirname + "/../src/vendors",
        limit:4096,
        name: "[path][name].[ext]",
        fallback: "file-loader"
      }
    }]
  },//loader
  {
    test: /\.(png|jpg|svg|ttf|otf|eot|woff|woff2|ico)$/,
    use:[{
      loader: "file-loader",
      options:{
        name: "[path][name].[ext]",
      }
    }]
  }//loader
]//loaders

в css я получаю:

#ajax-loader {
    background-image: url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvZGVjb3JhdGlvbi90azI2cGF0dGVybi5zdmciOw==)
}

если раскодировать содержимое то получится:

module.exports = __webpack_public_path__ + "images/decoration/image.svg";

Если закоментировать в конфиге секцию с url-loader, то все вроде как работает, но уже не преобразует маленьки изображения в base64, а эту фишку очень хотелось бы сохранить.

Подскажите пожалуйста, как исправить данную ситуацию?

1

1 ответ 1

1

кажется нашел ответ. такое, может происходить если в лодерах указывать одинаковое расширение файлов. (svg для url-loader и svg для file-loader).

Если конфиг исправить на такой вариант, то все сработает корректно:

  {
    test: /\.(png|jpg|svg)$/,
    use:[{
      loader: "url-loader",
      options:{
        exclude: __dirname + "/../src/vendors",
        limit:4096,
        name: "[path][name].[ext]",
        fallback: "file-loader"
      }
    }]
  },//loader
  {
    test: /\.(ttf|otf|eot|woff|woff2|ico)$/,
    use:[{
      loader: "file-loader",
      options:{
        name: "[path][name].[ext]",
      }
    }]
  }//loader

Как можно заметить, я убрал из file-loader расширения png|jpg|svg -- и теперь в css у меня корректный base64

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.