vue-cli构建项目使用 less
在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装。
第一步:安装
npm install less less-loader --save-dev
即通过npm安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用,所以就不将之记录在 dependencies 中。
第二步:在配置文件中配置
实际上如果我们通过vue-cli来构建项目,这一步是可以省略的。
在webpack.dev.conf.js中,我们可以看到下面的代码:
module: {rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })},
即webpack.dev.conf.js在合并了webpack.base.conf.js的基础上又添加了dev环境下的module。
注意:在上面的代码中,我们还可以使用loaders来代替rules, 他们的含义是一样的。
在build文件夹下有一个utils.js文件,这个文件提供了一些通用的方法,供webpack.dev.conf.js和webpack.prod.conf.js使用。 其中styleLoaders方法如下:
// Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) {var output = []var loaders = exports.cssLoaders(options)for (var extension in loaders) {var loader = loaders[extension]output.push({test: new RegExp('\\.' + extension + '$'),use: loader})}return output }
通过这个方法可以对大多数css预处理进行了配置,具体配置在cssLoaders方法中。
第三步:在单组件.vue中使用
如下所示:
<template><div class="hello"><h2>{{msg}}</h2><h2>Essential Links</h2><ul><li>Core Docs</li></ul><h2>Ecosystem</h2></div> </template><script> export default {name: 'hello',data: function () {return {msg: "Welcome to your vue.js app"}}} </script><style scoped lang="less">.hello {color: red;font-size: 0.45rem;h2 {color: blue;}} </style>
需要注意一下几点:
- 已经在webpack中配置了,所以这里不需要引入任何less文件。
- 在style中声明lang="less"。 注意: scoped的作用仅仅是限定css的作用域,防止变量污染。
- 这样就可以根据less的语法使用了。
补充:通过下面的代码就不难理解问什么scoped可以隔离作用域了。 即给不同组件的所有html添加一个属性,然后在css中使用属性选择器来防止作用域的污染,实在聪明!!!
把scoped去掉之后,我们就可以发现已经没有额外的属性了:
转载于:https://www.cnblogs.com/zhuzhenwei918/p/6870340.html
vue-cli构建项目使用 less相关推荐
- vue.js 构建项目_使用Vue.js和AWS Amplify构建Chatbot
vue.js 构建项目 Over the last few years, chatbots have exploded in popularity. It makes sense that busin ...
- Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
- Vue脚手架构建项目
目录 一.使用Vue脚手架(vue-cli)构建Vue项目 1.安装或升级脚手架 2.进入工作目录创建Vue项目 3.进入项目目录,启动项目 4.项目目录: (1)public目录:静态资源文件夹.i ...
- vue cli 3项目打包到指定目录
平常我们使用vue-cli构建项目,直接执行npm run build打包到dist目录下,然后项目一般又部署在我们服务器的根目录下.这样正常的流程,但是需求是多样的,有时我们就会遇到需要把项目部署到 ...
- python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理 从头新建一个Django项目 新建一个前端页面,使用vue应用 在Django中设 ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- cordova + vue cli构建跨平台应用
一.开发环境搭建 node.js 二.cordova 主要用于将开发好的网页打包成APP,支持的平台有:Android.IOS.Blackberry 10.OS X.Ubuntu.Windows.WP ...
- cli vue 外部js 引入 文件_javascript - vue cli构建的项目中,vue组件里怎么引入外部js文件里的方法...
问 题 我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...
- 使用 .NET CLI 构建项目脚手架
前言 在微服务场景中,开发人员分配到不同的小组,系统会拆分为很多个微服务,有一点是,每个项目都需要单元测试,接口文档,WebAPI接口等,创建新项目这些都是重复的工作,而且还要保证各个项目结构的大体一 ...
- vue+semanticUI构建项目+页面动态炫酷效果
在Vue项目中 , 需要全局引用的js代码在index.html中引入即可 项目构建 页面看板娘 导航栏的滚动侦听实现导航栏随内容下滑后固定 回到顶部实现 网页生成二维码 , 在手机扫码即可查看这个网 ...
最新文章
- Partition函数
- 【杂谈】提升写代码效率不得不做的三件事
- oracle数据库的基本错误,Oracle新手最常碰到错误及解决方案
- 新数据革命:开源图形化数据引擎Hawk5发布
- linux6.4 安装oracle11g 出现错误ORA-01078和LRM-00109错误
- php跨域请求解决方案_解决TP接口跨域问题
- Ububtu 18.04 安装 mysql 和 phpmyadmin 过程记录
- Linux学习(一)——常用命令
- STorM32三轴云台控制器PID参数调节(1)
- 抖音html动态时钟,三分钟教会!火爆抖音的“动态时钟屏保”,个性十足!
- 分类网络 resnet
- C#中的控件Binding
- Warpaffine
- 漫画电子电路读书笔记
- 运放电路的知识点(二)
- 【C刷题记录】地月折纸——对数使用
- Redis:本地客户端连接远程服务器方法
- Matlab:写入到 Diary 文件
- php获取当前周的起止日期,php获取本周开始日期和结束日期的方法
- MyBatis环境搭建
热门文章
- 一个家庭女人太强势,这个家庭会怎样?
- 不喜欢溜须拍马屁的人适合在哪里工作?
- 4.3一个“简陋”的打字程序
- Navicat常用快捷键
- SqlServer 更新/新增一条语句,返回其中某一列的值 inserted,@@IDENTITY()
- sql limit 子句_SQL Server中的FOR XML PATH子句
- 如何监视SQL Server tempdb数据库
- Assembly generation failed Referenced assembly ‘xxx’ does not have a strong name
- 基于spi FLASH的嵌入式文件系统 littlefs(转)
- Java核心技术-具体的集合