关于vue-cli 全局引入less变量,*.vue文件不在需要引入解决方案

in 系统环境
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

一、直接用vue-cli 创建的项目,你应该使用

  • 1、vue add style-resources-loader
  • 此命令会提示你可以选择安装less ,选择使用你需要的相关css也行
  • 2、以上未成功可手动添加一下包
    yarn add style-resources-loader 
    yarn add vue-cli-plugin-style-resources-loader 
    or
    npm i style-resources-loader 
    npm i vue-cli-plugin-style-resources-loader 
  • 3、项目根目录新建vue.config.js
  • 4、配置全局less 变量,后期项目不在需要每个vue文件引入变量
//vue.config.js
const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}

export defaults = {
    pluginOptions: {
            'style-resources-loader': {
                preProcessor: 'less',
                //这里是你的定义的全局less 变量
                patterns: [
                    resolve('src/styles/shared/variables.less'),
                ]
            }
      }
 }
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看