前端vue前端JavaScript

【前端案例】 18 - 自定义鼠标图标

2020-12-14  本文已影响0人  itlu
自定义鼠标图标样式
    div {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 300px;
      height: 300px;
      cursor: url(../image/cursor_icon.ico), default;
      border: 1px solid #ccc;
    }
注意这里的属性使用逗号分隔
在vue中使用 ico 图标的时候遇到的问题
error  in ./src/assets/images/cursor_icon.ico
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
出现的问题
解决方法
  1. vue-cli3中需要在根目录下自定义一个文件 vue.config.js,文件内容:
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('image')
      .test(/\.ico$/)
      .use('url-loader')
      .loader('url-loader')
  }
}
上一篇下一篇

猜你喜欢

热点阅读