zoukankan      html  css  js  c++  java
  • vue-cli4配置less全局变量

    一、安装依赖

    yarn add --dev less-loader less
    yarn add --dev style-resources-loader

    二、配置

    在vue.config.js文件中添加:

    const path = require('path')
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    module.exports = {
       pluginOptions: { // 第三方插件配置
            'style-resources-loader': {
              preProcessor: 'less',
              patterns: [path.resolve(__dirname, 'src/assets/styles/variables.less')] // less所在文件路径
            }
         }
     }

    三、使用

    在variables.less文件中声明变量:

    @blue:#00f;
    @red:#f00;
    @green:#0f0;

    在.vue文件中使用:

    <style lang="less" scoped>
       .h2{
           color: @red; // 声明的less样式变量
       }
    </style>

    注意:如果发现页面引入一直报错,说找不到、不存在或者定义无效等错误,那么还需要安装依赖:

    yarn add --dev vue-cli-plugin-style-resources-loader

    其实,正常情况下载安装依赖style-resources-loader时,会同时安装vue-cli-plugin-style-resources-loader,可能有其它不确定原因导致vue-cli-plugin-style-resources-loader安装失败,出错的话就需要手动安装了。

    安装完成,重启服务即可。

  • 相关阅读:
    类和迭代器
    使用委托调用函数
    自定义类和集合
    带函数的参数返回函数的最大值
    使用程序调试输出窗口
    自定义类
    类和结构
    全局参数
    带参数的函数返回数组之和
    IS运算符
  • 原文地址:https://www.cnblogs.com/Jimc/p/13840857.html
Copyright © 2011-2022 走看看