1.第一步:

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

2.然后在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/style/style.less')路径改成自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

结果如下

exports.cssLoaders = function (options) {
options = options || {} const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
} var postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
} function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/style/style.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
} // generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
} // Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
} // https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: lessResourceLoader('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}

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

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

@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;

注意,赋值不是等号
在组件中,就可以使用全局变量了。

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

好用!贼好用。

vue设置全局样式变量 less的更多相关文章

  1. 02 uni-app框架学习:设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

  2. WPF——如何为项目设置全局样式。

    在项目中,需要为所有的Button.TextBox设置一个默认的全局样式,一个个的为多个控件设置相同的样式显然是不明智的.在WPF中可以通过资源设置全局样式,主要有俩种方法: 1.第一种就是先写好按钮 ...

  3. React项目中使用less/scss&全局样式/变量

    使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app c ...

  4. Vue设置全局的方法和样式

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  5. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  6. vue设置全局query参数

    router.beforeEach((to, from, next) => { // 设置全局店铺ID shopid const shopid = from.query.shopid // 如果 ...

  7. Vue设置全局cookies样式

    ''' 配置全局cookies样式 下载:cnpm install vue-cookies import cookies from 'vue-cookies' Vue.prototype.$cooki ...

  8. Vue设置全局js/css样式

    ''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...

  9. UBUNTU 下设置全局 path变量

    全局的对所有用户都可以的使用的PATH: 可以通过修改配置文件: /etc/bashrc 和 /etc/profile 来时配置, 全局的PATH; 例如: vi /etc/profile 在最后后加 ...

随机推荐

  1. input样式去掉苹果手机的默认样式

    /*<!---->去掉苹果短的样式*/ input[type="button"], input[type="submit"], input[type ...

  2. go语言系列--前言

    我为什么要学golang语言 绝不是一时兴起,也不是人云亦云,这是我规划了很久的事了. 我曾自学过C语言,C++语言,Python语言,可都学的不精,原因我想是不知道为了什么而学的,可是这就是缺少学习 ...

  3. Linux安装配置redis 、启动redis、redis设置密码

    由于间隔时间较长.机器的环境不同等等原因,所以每次安装redis的时候总是不那么顺利,所以这次我要做个笔记 文章大部分内容源于https://blog.csdn.net/gisredevelopmen ...

  4. [design pattern](7) Singleton

    前言 上面的章节中,我们介绍了工厂模式,它是创建型模式的一种.本章我们将会介绍 单例模式 ,它也是创建型模式的一种.单例模式是我们比较常用的一个设计模式,也是最简单的一种设计模式. 单例模式 介绍:确 ...

  5. pyCharm报错"your evaluation license has expired, pycharm will now exit"解决方法(实测)

    一.修改C:\Windows\System32\drivers\etc 目录下的hosts文件 1.打开hosts文件,路径是 c:\windows\system32\drivers\etc\host ...

  6. 从头开始学习Vuex

    一.前言 当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态.以前的解决办法: a.将数据以及操作数据的行为都定义在父组件; b.将数据以及操作数 ...

  7. nodejs 简单的搭建一个服务器

    前言: nodejs 主要是后台语言  node 是在终端运行的,所以他可以进行 dos 命令 模块 自定义 JavaScript 是前台语言 nodejs 是 也是使用我们的 JavaScript ...

  8. 网络协议之FTP协议

    FTP(File Transfer Protocol) 协议文档:RFC 959 1.1 FTP协议介绍 FTP协议基于TCP/IP协议实现,处于应用层. FTP协议为C/S架构,每一次FTP连接,命 ...

  9. ps 和 pstree的用法

    ps 查看某个具体的命令进程: ps -C cmd-name: 如: ps -C httpd // 如果有多个名字相同的进程, 如httpd... 应该是它下面的子进程, 这时会显示第一个进程id. ...

  10. Microsoft:Team Foundation Server 20XX Release Notes

    ylbtech-Microsoft:Team Foundation Server 2017 Release Notes 1.返回顶部 1. https://docs.microsoft.com/en- ...