Vue-cli3全局使用less变量

最新推荐文章于 2023-02-24 22:24:33 发布

加油鸭老王

最新推荐文章于 2023-02-24 22:24:33 发布

阅读量512

点赞数

分类专栏： Vue 文章标签： vue.js less npm 前端

本文链接：https://blog.csdn.net/weixin_42400404/article/details/105583711

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在网上看到很多这个方式安装，但是我的会报 vue错误，或许是我方法用错了。

vue add style-resources-loader

如果你之前已经尝试很多次，建议先卸载关于less的

npm uninstall less -s

npm uninstall less-loader -s

npm uninstall style-resources-loader -s

开始：重新安装

npm install less -s

npm install less-loader -s

npm install style-resources-loader -s

三者缺一不可，缺少一个会报错。

安装完之后，vue.config.js会出现依赖

使用：

一：

新建一个less文件，例如：

在vue.config.js中添加配置

pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 这儿不能使用别名路径
              path.resolve(__dirname, './src/assets/less/index.less')
            ]
        }
    },

less内容：

@light-color: #fff;

就可以在.vue文件中复用

<style lang="less">
    .totality{
        background-color: rgba(0, 204, 255, 1);
        border:1px solid rgba(0, 204, 255, 1);
        color:@light-color;
    }
    .stayTotality{
        background-color: rgba(102, 51, 51, 1);
        border:1px solid rgba(102, 51, 51, 1);
        color:@light-color;
    }
</style>

style中的 lang="less" ，一定要加；

其它页面都可以直接复用，改动.less文件中，复用的地方也都会改变。

2020年4月17日