zoukankan      html  css  js  c++  java
  • vue项目使用less全局变量

    vue 使用less全局变量

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

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

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

     function lessResourceLoader() {
            var loaders = [
                cssLoader,
                'less-loader',
                {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: [
                            path.resolve(__dirname, '../src/assets/styles/common.less'),
                        ]
                    }
                            }
            ];
            if (options.extract) {
                return ExtractTextPlugin.extract({
                    use: loaders,
                    fallback: 'vue-style-loader'
                })
            } else {
                return ['vue-style-loader'].concat(loaders)
            }
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

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

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

    @sidebar:240px;
    @headerHeight:65px;
    @bodyMinWidth: 700px;
    • 1
    • 2
    • 3

    注意,赋值不是等号

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

    <style lang='less' scoped>
      .content {
        background:red;
        height:auto;
        margin-left: @sidebar;
         calc(100%-@sidebar);
      }
    </style>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    生效!

  • 相关阅读:
    zzuli--2134: 维克兹的进制转换(规律)
    hdu--1316--How Many Fibs?(java大数)
    NYOJ--517--最小公倍数(大数打表)
    NYOJ--513--A+B Problem IV(大数)
    NYOJ--45--棋盘覆盖(大数)
    NYOJ--114--某种序列(大数)
    HAUT--1262--魔法宝石(暴力)
    NYOJ--1276--机器设备(河南省第九届省赛,简单的bfs)
    hdu--1429--胜利大逃亡(续) (bfs+状态压缩)
    NYOJ--541--最强DE 战斗力(递推)
  • 原文地址:https://www.cnblogs.com/lcosima/p/9556372.html
Copyright © 2011-2022 走看看