vue-项目问题记录

Vue 项目问题
参考:https://www.ahwgs.cn/style-resources-loader-less.html

1. less-mixin 全局引入
实现手机端 1px 边框

• mixin.less
  使用伪类实现下边框 1px

.border-1px-mixin(@color) {
    position: relative;

    &:after {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid @color;
        content: ''
    }
}

• global.less
  使用媒体根据查询改变缩小因屏幕分辨率放大的高度

@media(min-device-pixel-ratio:1.5) {
    .border-1px:after {
        border-bottom: 1px solid #000;
        transform: scaleY(0.7)
    }
}

@media(min-device-pixel-ratio:2) {

    .border-1px:after {
        border-bottom: 1px solid #000;
        transform: scaleY(0.5)
    }
}

• main.js
  全局引入

import "./common/less/index.less";

其中 index.less

@import './icon.less';
@import './mixin.less';
@import './global.less';

其他的 css 样式都可以应用到全局，但是 mixin 无法使用

解决方法
安装 loader

yarn add style-resources-loader

vue.config.js

//全局注入mixin.less;
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/common/less/mixin.less")]
    });
}

module.exports = {
  chainWebpack(config) {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  }
}