blog

Appearance

5 月 31 日 ​

5 月 28 日 ​

5 月 26 日 ​

5 月 25 日 ​

5 月 24 日 ​

5 月 22 日 ​

  • 264 yarn build 打包时，会有一系列的警告
javascript

  // 警告信息如下
  chunk chunk-8bbe4a0e [mini-css-extract-plugin]
  Conflicting order. Following module has been added:
  * css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/imgPreview.vue?vue&type=style&index=0&id=41ed99a7&lang=scss&scoped=true&
  despite it was not able to fulfill desired ordering with these modules:
  * css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/videoPreview.vue?vue&type=style&index=0&id=6fbe4342&lang=scss&scoped=true&
    - couldn't fulfill desired order of chunk group(s)
    - while fulfilling desired order of chunk group(s) , , , ,

// 目前可以在 vue.config.js 中设置去除警告信息

javascript
    // 设置忽略警告【mini-css-extract-plugin】 order
      extract: process.env.NODE_ENV === 'production' ? {
        ignoreOrder: true,
      } : false,

5 月 20 日 ​

5 月 19 日 ​

5 月 18 日 ​

5 月 15 日 ​

5 月 14 日 ​

  • 257 vue3 全局函数注册及调用

  • 256 vue.config.js 设置 css 是否单独生成到 css 文件

    javascript
        /*
      默认为true,会将项目中的css文件抽离到单独的css文件中,使用时需要单独import使用
      设置为false,则会直接一起打包了
    */
    css: {
      extract: false
    },

  • 255 javascript 基础知识

  • 254 安装 sass 和 sass-loader 时报错 this.getOptions is not a function

    • sass-loader 版本过高导致，我当时安装的版本为 11.1.1 卸载后改为 10.0.1 运行 ok

      javascript
         npm uninstall sass-loader
   npm install sass-loader@10.0.1

5 月 13 日 ​

5 月 12 日 ​

  • 249 webpack 通过 less-loader 设置 css 前缀

    javascript
      {
    loader: 'less-loader',
    options: {
      modifyVars: {
        '@ant-prefix': 'yourPrefix',
      },
      javascriptEnabled: true,
    },
  }

5 月 11 日 ​

5 月 9 日 ​

  • 247 css 样式

    javascript
        // 鼠标悬浮于a标签选择器上的样式变化
    a:hover
    {
        background-color:yellow;
    }

    // 选择器为活动的链接设置的样式
    a:active
    {
        background-color:yellow;
    }

5 月 8 日 ​

  • 246 promise 防抖和节流

  • 245 xgplayer 西瓜视频播放器

  • 244 灰色模式和色弱模式

    javascript
        // 灰色模式
    .html-grey {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
    }

    // 色弱模式
    .html-weakness {
    filter: invert(80%);
    -webkit-filter: invert(80%);
    -moz-filter: invert(80%);
    -ms-filter: invert(80%);
    -o-filter: invert(80%);
    }

5 月 6 日 ​

5 月 5 日 ​

5 月 1 日 ​