1. 项目模板webpack

vue init webpack <项目名>

2. 安装依赖

除了less所需的less less-loader两个包以外,还需要安装style-resources-loader

3. 配置文件

路径:bulid/utils.js

4. 配置代码

//参考utils下面的generateLoaders方法即可
//主要是要使用style-resources-loader来引入文件
**function generateLess(){
const loaders = [
cssLoader,
'less-loader',
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common/common.less')
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}**

结果:

页面上渲染结果

[vue-webpack-template] webpack配置全局less引入的更多相关文章

  1. webpack中字体配置,可以引入bootstrap

    {test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...

  2. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  3. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  4. vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  5. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  6. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  7. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  8. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  9. Vue.js 2.x Development Build With Hot Reloading For External Server (using Webpack template)

    This article assuming you created your project using webpack template. vue init webpack <PROJECT_ ...

随机推荐

  1. Azure Storage 系列(一)入门简介

    一,引言 今天作为新的Azure 资源介绍的开篇,我们来学习一个新的服务,Azure Storage.众所周知,我们实际在开发过程中,会需要存储一些比如说日志,图片,等等,各种类型的数据.比如说存储图 ...

  2. ssm简单整合

    pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...

  3. solrcloud集群版的搭建

    说在前面的话 之前我们了解到了solr的搭建,我们的solr是搭建在tomcat上面的,由于tomcat并不能过多的承受访问的压力,因此就带来了solrcloud的时代.也就是solr集群. 本次配置 ...

  4. vue 中PDF实现在线浏览,禁止下载,打印

    需求:在线浏览pdf文件,并且禁止掉用户下载打印的效果. 分析:普通的iframe.embed标签都只能实现在线浏览pdf的功能,无法禁止掉工具栏的下载打印功能.只能尝试使用插件,pdfobject. ...

  5. Android Studio出现:Your project path contains non-ASCII 错误代码解决方法

    导入Project的出现: Error:(1, 0) Your project path contains non-ASCII characters. This will most likely ca ...

  6. JVM学习第二天(垃圾回收器和内存分配策略)大章

    说道垃圾回收器大家应该都会有所了解,GC白,当然说道具体的可能就不是很清楚了,今天我们就来玩一玩; GC要做的事情: 第一步:确定堆中需要回收的对象; 第二步:什么时候回收; 第三步:怎样回收 为什么 ...

  7. java集合类源码学习二

    我们查看Collection接口的hierarchy时候,可以看到AbstractCollection<E>这样一个抽象类,它实现了Collection接口的部分方法,Collection ...

  8. Typecho 使用

    安装 下载Typecho 链接:typecho 下载后得到一个压缩文件,解压后获得目录如下: 将该文件夹改名为blog并且上传到/var/www/blog目录下:如下: 修改apache配置 参考:链 ...

  9. wireshark在ubuntu系统中的正确安装方法

    以前一直在使用wireshark这个网络工具,最近在用来抓包学习MQTT协议的时候,发现wireshark暂时还未加入对MQTT协议分析的原生支持,网上搜了一下,可以自己用插件的形式扩展wiresha ...

  10. 微信小程序-组件-视图容器

    1.view 1.作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性. 2.常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态 3.eg:<view ho ...