vue 使用less全局变量

向右看齐 2022-05-20 03:50 467阅读 0赞

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

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

然后在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)
            }
        }

`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;

注意，赋值不是等号

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

生效！