less

[lizehua-cn]

less 相关

[lizehua-cn]

配置全局less变量

less: {
  lessOptions: {
    modifyVars: { // globalVars: 前置, modifyVars: 后置
      hack: `true; @import "~@/lessFile";`
    }
  }
}

[lizehua-cn]

less + css 变量实现动态换肤功能

npm i -D style-resources-loader vue-cli-plugin-style-resources-loader

配置 theme.less

@primaryColor: var(--primaryColor, #00061e);
@primaryTextColor: var(--primaryTextColor, #fbd127);

:export {
  name: "less";
  primaryColor: @primaryColor;
  primaryTextColor: @primaryTextColor;
}

配置 vue.config.js

const path = require('path')
module.exports = {
  ...
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname,
          // 不能使用(如下:alias)中配置的别名路径
          './src/theme.less')
      ]
    }
  }
  ...
}

配置 theme.js

const themes = {
  blue: {
    primaryColor: '#00061e',
    primaryTextColor: '#fbd127',
  },
  white: {
    primaryColor: '#fff',
    primaryTextColor: '#3579E0',
  }
}
const changeStyle = obj => {
  for (let key in obj) {
    document
      .getElementsByTagName('body')[0]
      .style.setProperty(`--${key}`, obj[key]);
  }
}
export const setTheme = name => {
  const themeConfig = themes[name]
  changeStyle(themeConfig)
}

配置 main.js

  const skinData = skin[data.data.type]
  Vue.prototype.$skin = skinData
  // 配置变量
  setTheme(skinData)
  // 引入样式
  import(`@/${skinData}/index.less`)

[lizehua-cn]

less变量中使用webpack alias

.bgRatio(@url) {
  background-image:~"url('~@/assets/colorprediction/images/@{url}@2x.png')";

  @media (-webkit-min-device-pixel-ratio: 3),
  (min-device-pixel-ratio: 3) {
    background-image:~"url('~@/assets/colorprediction/images/@{url}@3x.png')";
  }

  background-size: cover;
}