精华内容
下载资源
问答
  • vue 使用less全局变量

    2019-06-26 17:12:51
    我们经常用less定义一些全局变量,比如头部的高度,比如主题的颜色,比如侧边栏的宽度,这时我们定义less 全局文件是有必要的,那如何在vue中使用呢? 我首先尝试着把common.less文件,放在main.js中,发现并不起...

    我们经常用less定义一些全局变量,比如头部的高度,比如主题的颜色,比如侧边栏的宽度,这时我们定义less 全局文件是有必要的,那如何在vue中使用呢? 
    我首先尝试着把common.less文件,放在main.js中,发现并不起作用。。。 
    在网上搜了一下,可以这样配置: 
    首先安装一个包:
     

    npm install sass-resources-loader --save-dev
    

    然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码:

    path.resolve(__dirname, '../src/assets/styles/common.less')路径改成自己对应的文件 
    然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

    修改完配置文件记得重启服务器:npm run dev 
    ok, common.less
     

    注意,赋值不是等号

    在组件中,就可以使用全局变量了。

    <style lang='less' scoped>
      .content {
        background:red;
        height:auto;
        margin-left: @sidebar;
        width: calc(100%-@sidebar);
      }
    </style>
    

    OK!!!!

    展开全文
  • less 全局变量使用

    2018-11-18 10:09:00
    less 全局变量使用 忽然想定义一个变量,但是却需要每个 .vue 文件都需要单独引入这个全局变量才可以,导致很多重复不必要的工作,因而得寻找一种可以任何地方都可以访问的方法 借助换肤这个功能 sass-resources-...

    less 全局变量使用

    忽然想定义一个变量,但是却需要每个 .vue 文件都需要单独引入这个全局变量才可以,导致很多重复不必要的工作,因而得寻找一种可以任何地方都可以访问的方法

    /** vue-cli3.0 **
    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        const oneOfsMap = config.module.rule('less').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              resources: './path/to/resources.less',
    
              // Or array of paths
              resources: ['./path/to/vars.scss', './path/to/mixins.scss']
            })
            .end()
        })
      }
    }

    总结

    • 后期再进行记录,一步步来吧

    转载于:https://www.cnblogs.com/sinosaurus/p/9977102.html

    展开全文
  • vue3引入less,使用less全局变量

    千次阅读 2020-09-25 10:41:57
    先下载less:npm i less-loader less --save-dev npm i style-resources-loader --save-dev vue.config.js配置 方法1 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps...
    1. 先下载less:npm i less-loader less --save-dev
    2. npm i style-resources-loader --save-dev
    3. vue.config.js配置

    方法1

    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
          less: {
            globalVars: {
              'theme-color': '#421466'
            }
          }
        }
      }
      // 在.vue文件中使用,缺点:每新增一个变量,需重新启动项目
    <style lang='less' scoped>
       .p{
           color:@grey; //声明的less样式变量
       }
     </style>
    

    方法2
    1.先下载:npm i style-resources-loader --save-dev
    2.vue.config.js配置

    function addStyleResource(rule) {
      rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
        // 需要引入的公共文件
          patterns: [
            path.resolve(__dirname, './src/assets/css/reset.less'),
            path.resolve(__dirname, './src/assets/css/variable.less')
          ]
        })
      }
      chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
        }
     
    
    // 在variable.less文件中声明变量
    @grey: #979797;
    @theme-color: #B39C90;
    @bg-menu: #E9E1DE;
    @title-color: #646464;
    
    
    // 在.vue文件中使用:
    <style lang='less' scoped>
       .p{
           color:@grey; //声明的less样式变量
       }
     </style>
    
    展开全文
  • less变量使用

    千次阅读 2019-04-09 15:56:58
    less变量的使用 less中的变量用@声明。 一般这三种可以当做变量使用: 属性值 属性名 选择器名 使用方法 属性值为变量 @color:yellowgreen; //属性值为变量 .one{ width: auto; height: 50%; text-align:...

    less变量的使用

    • less中的变量用@声明。

    • 一般这三种可以当做变量使用:

      • 属性值
      • 属性名
      • 选择器名

    使用方法

    属性值为变量

    @color:yellowgreen; //属性值为变量
    .one{
      width: auto;
      height: 50%;
      text-align: center;
      background: @color;
    }
    

    属性名为变量

    @text:text-align;   //属性名为变量
    .one{
      width: auto;
      height: 50%;
      @{text}: center;
      background: yellowgreen;
    }
    

    选择器名为变量

    @selector:.one;     //选择器名为变量
    @{selector}{
      width: auto;
      height: 50%;
      text-align: center;
      background: yellowgreen;
    }
    
    展开全文
  • Less变量

    千次阅读 2017-11-20 10:30:47
    Less变量 定义变量 Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope)。简单的讲,变量作用域就是局部变量和全局变量的概念。 Less 中,变量作用域采用的是就近原则,换句话说,就是先...
  • vue-cli4中使用less全局变量

    千次阅读 2020-09-04 19:46:16
    vue配置less全局变量,在 vue.config.js 中添加如下配置: module.exports = { css: { loaderOptions: { less: { globalVars: { ...这样就可以在.vue文件style标签中,直接使用var.less中的变量。 这
  • 在前端vue项目引入less使用less,在less引用外部文件,在less使用变量一、less是什么?二、操作步骤1.引入库2.设置style的lang属性3.使用less总结 一、less是什么? Less是一种CSS的扩展和动态样式表语言,...
  • less变量

    千次阅读 2019-07-15 22:32:55
    编写less变量,和我们平时定义js变量的方法不太一样,在less中是使用 @ 标识符来定义变量的,如: @font-color: blue; @border-color: #ddd; 这里就定义了两个变量,分别是font-color 和 border-color。 二:...
  • 1.在assets文件夹下创建–&...//这些都是less的自定义变量,都在可以全局使用 @data-color-cyan: #70FFE1; @data-color-green: #00D08F; @data-color-orange: #FA6400; @user-state-orange: #FE824C; @big-size: 30p...
  • vue-cl3安装less之后默认无法使用全局变量,需要额外添加插件 解决方案 安装插件vue add style-resources-loader 新建一个less文件存放全局变量 修改配置,进入vue.config.js(不存在就在项目根目录创建一个)...
  • 1、安装依赖 vue add style-resources-loader vue-cli-plugin-style-resources-loader -D 2、vue.config.js引入 pluginOptions: { 'style-resources-loader': { ... path.resolve(__dirname, './src/style/theme.less
  • 正确使用less以及less变量variables

    千次阅读 2020-02-21 19:50:52
    正确使用less 一、如何使用less less文件只有在被编译后才能被浏览器识别使用 二、less编译工具 1、koala 国人开发的全平台的less编译工具 网址:http://koala-app.com/ 2、winless windows下的less编译软件 网址:...
  • Less定义变量

    千次阅读 2019-10-04 22:29:38
    使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词...
  • 上篇中,我们简单了解了less使用环境和怎么使用less;下面我们了解一下less变量和注释less 的注释/*这是第一种注释*///这是第二种注释 上面的第一种注释麻烦一点,但是当我们的less文件编译成css文件后,css...
  • vue中使用Less全局变量

    千次阅读 2018-07-17 11:26:50
      1、安装 sass-resources-loader,安装less ...npm install less less-loader --save 2、添加函数,启动项目 找到 build/utils.js 文件,在 exports.cssLoaders 模块中加多一个函数  ...
  • 安装插件 > vue add style-resources-loader ...选择对应的 css 预处理器,这里选择 Less 配置 安装完插件后,打开根目录下的 vue.config.js 文件(没有则会在插件安装时新建),发现有如下配置项: mod...
  • vue开发过程中,单个vue文件内的局部样式如果想使用全局的less变量会报错找不到,需要在vue文件内引用定义变量的less文件,但是每个vue文件的路径各不相同,又不能使用绝对路径引用,每次引用都要调整引用路径,希望...
  • umi 使用 less 变量定义主题色

    千次阅读 2020-06-08 22:34:01
    但是,直接使用 js 来书写变量并不方便,且没有提示,因此使用lesss书写,并转为 js 文件 1. 书写 less @primary-color: #78eaff; 2. 转换 less 为 js 在 src/theme文件夹下创建 variables.ts 文件。用 less-vars-...
  • 提示:这里使用的是 cli 2.+ 的模板 注意:项目用的 less or scss 如果不会改 less or scss 请自行修改 【GO>>】 安装 scss-resources-loader npm install sass-resources-loader --save-dev 修改 build 中的...
  • 新建一个less文件,用于修改vant的less变量 如conver_vant.less,在里面修改变量 //toast @toast-background-color:blue; @action-sheet-max-height:80%!important; 在vue.config.js里按照官方提示配置 这里注意要...
  • 1、在vue.config.js里添加需要的的less变量 ​ module.exports = { css: { loaderOptions: { less: { globalVars: { 'primary-color': '#5D6BBA', 'success-color': '#2AC58B', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,970
精华内容 46,388
关键字:

less如何使用变量