vue 使用less全局变量

向右看齐 2022-05-20 03:50 451阅读 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;

注意，赋值不是等号

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

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

生效！

发表评论取消回复

表情：

评论列表（有 0 条评论，451人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中Less设置全局变量

装依赖 npm install less --save-dev npm install sass-resources-loader --save-dev...

分手后的思念是犯贱/ 2024年04月17日 05:40/ 0 赞/ 64 阅读

相关 vue-cli4中引入全局less变量的方式

1.安装 style-resources-loader npm i style-resources-loader --save-dev 2.安装vue-cli-p

ゝ一世哀愁。/ 2022年12月25日 04:54/ 0 赞/ 228 阅读

相关 Vue Cli3.0 全局引入 less 变量

我们开发过程中经常会使用很多 less 全局样式，但是 vue 文件中想使用 less 变量，就需要挨个引入，极其麻烦。现在我来揭秘： 1. 定义一个 themes.le

古城微笑少年丶/ 2022年12月20日 01:57/ 0 赞/ 162 阅读

相关 vue——scss变量全局使用

vue——scss变量全局使用 1.终端安装sass-resources-loader npm install sass-resources-loader

爱被打了一巴掌/ 2022年10月04日 15:42/ 0 赞/ 290 阅读

相关 vue 使用全局变量

vue 使用全局变量使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话，打包

缺乏、安全感/ 2022年06月08日 07:18/ 0 赞/ 268 阅读

相关 vue中使用Less全局变量

1、安装` `sass-resources-loader，安装less npm install sass-resources-loader --sav

Love The Way You Lie/ 2022年05月20日 10:26/ 0 赞/ 372 阅读

相关 vue 使用less全局变量

我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，那如何在vue中使用呢？我首先尝试着把co

向右看齐/ 2022年05月20日 03:50/ 0 赞/ 452 阅读

相关 vue 全局变量的使用方式

[https://blog.csdn.net/qq\_30669833/article/details/81706217][https_blog.csdn.net_qq_306

我不是女神ヾ/ 2022年01月16日 23:41/ 0 赞/ 227 阅读

相关 vue 全局使用scss 变量

1.安装scss npm install --save-dev sass-loader //sass-loader依赖于node-sass npm i

野性酷女/ 2022年01月12日 03:09/ 0 赞/ 1140 阅读

相关 Vue 实现全局使用sass, less变量

首先运行这行命令 npm install sass-resources-loader --save-dev；在项目的build/utils.js中，找到

Bertha 。/ 2021年12月15日 23:25/ 0 赞/ 336 阅读