vue-cli 、webStrom 配置使用less

最新推荐文章于 2024-06-17 02:23:22 发布
最新推荐文章于 2024-06-17 02:23:22 发布
阅读量643 收藏
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm1022/article/details/81663764
版权

1、先安装less，less-loader

npm install less less-loader --save-dev

会在package.json中看到：

 "less": "^3.0.2",
 "less-loader": "^4.1.0"

（也可以手动加入到package.json中），之后不用配置就可以在项目中用less了，因为在webpack配置中有utils.js对css各种预处理语言进行了配置加载器，

这里写图片描述

在build文件夹中的webpackage.base.conf.js中配置：

{
  test:/\.less$/,
  loader:'less-loader'
}

在style标签中的属性设置为lang=‘less’即可使用·

<style  lang="less" scoped>
  @blue: #5B83AD;
  .bordered {
    border-top: dotted 2px black;
    border-bottom: dotted 2px black;
  }

  .hello {
    color: @blue;
    .bordered;

    h2 {
      color: blue;
    }
  }
  
</style>

2、配置webStrom的less设置

启动webStrom,进入 文件（File）-设置（Settings），在“IDE Settings”里面找到 外部工具（External Tools），

点击“+”，选择“less”，如下图：
这里写图片描述
点击“OK”，确定即可。

3、客户端使用less

在你的项目中引入LESS很简单：
1.下载less.js，
2.创建一个文件来放你的样式，比如style.less;
3.添加以下代码到你的HTML的<head>中:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

需要设置参数，在 <script src="less.js"></script> 之前 定义全局的 less 对象就可以为 Less.js 设置参数：

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js" type="text/javascript"></script>

还可以用Less CDN 加速

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

ps：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

Lucy-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue CLI3 Less 配置
IDM1001的博客
09-11 1312
1. Vue CLI3 引入全局 less 文件 目的： 全局使用 less 文件中定义的变量，而不需要每个组件中单独引入 安装 style-resources-loader vue add style-resources-loader 安装过程中选择 Less 回车 安装成功之后，在 vue.config.js 文件中生成以下代码 pluginOptions: { 'style...
使用vue-cli（2.9.6）构建一个vue的项目
qq_25354709的专栏
02-11 4680
一、全局安装vue-cli npm install vue-cli -g 初始化一个vue的项目 vue init webpack vue-book ? Project name vue-book ? Project description A Vue.js project ? Author xxx ? Vue build standalone ? Install vue-route...
vue-cli配置less
weixin_45581741的博客
10-07 1108
安装vue—cli指令 和 less配置 npm i vue-cli-g //全局安装 通过脚手架的方式创建项目：vue init webpack 项目名（不能大写） 进入文件夹：cd 项目名 运行项目:npm run dev/npm start 当项目写完了打包：npm run bulid index.html文件：是一个让我们插件进行复制的一个文件 引进css: import from 'xx.css' 引进js: im
Vue脚手架（cli和vite详解）
最新发布
2301_82244509的博客
06-17 2277
Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者， 是作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。vite 提供了用 npm 或者 yarn 一建生成项目结构的方前端字节跳动真题解析ack，加载器、插件不够丰富2.打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包。
vue-cli3项目配置less全局变量
Beamon__的博客
03-30 669
ps：项目已配置less，关于less配置不做多说 1.安装相关所需依赖包 npm install style-resources-loader vue-cli-plugin-style-resources-loader -D 2.添加全局less文件 3.设置vue.config.js // 在暴露的配置对象添加如下配置 pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patte
vue-cli使用less
aohou7050的博客
07-06 130
vue-cli中使用less package.json 中添加 less,less-loader 之后不需要进行其他配置 在vue-cli构建的项目中 utils.js 已经帮我们引入了各种css编辑器 在这之后就可以在js中import less了 一般 在 mian.js 中引入全局使用的css 比如说 重置页面样式 ,初始化...
html5 移动端开发模板,搭建一个vue-cli的移动端H5开发模板
weixin_35681965的博客
06-09 1454
简介vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。技术栈：vue + vux + axios + less功能搭建项目目录配置 css 预处理器配置 UI 组件库 vux解决移动端适配配置页面路由缓存axios 请求封装工具类函数封装toast 组件封装dialog 组件封装底部导航组件封装列表页 demo表单页 ...
js教程 less基本规则以及在vue中使用
qq_36723759的博客
01-29 2222
less基本规则以及在vue中使用less的基本概念vue中使用lessless的注释less的嵌套规则与&less对于串行选择器的嵌套规则表示外部串行选择器的&标识符less中的变量与运算less中的变量less中的运算less中的混合less继承 less的基本概念 Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixi...
vue 开发微商城-项目的构造-1
Your life needs a sense of ritual!
01-03 2790
1.vue是基于MVVM模式的框架，即通过数据来操作DOM结构，最为突出的特点就是双向数据绑定的特点；如下图所示是vue-cli搭的脚手架项目文件的构成 2.主要代码的编写是src文件，一般来说一个大项目的文件结构如下图所示： 这样的项目结构有利于项目的开发和后期的维护。 3.main.js 项目的基本配置以及挂载 //引入项目所需要的基础组件 import 'babel-po
## 关于Vue项目基于vue cli4创建步骤问题
qq_46690881的博客
04-23 331
关于Vue项目基于vue cli4创建步骤问题 基础：已下载 node.js（8+） webpack vue cli4 使用工具： webstrom win10 实属个人开发步骤，若有帮助，多多点赞。 1.在对应文件夹下进入cmd . 1.1 选中该文件夹，输入cmd即可。 1.2 较慢步骤 1.2.1直接win+r 进入 12.2 输入cd /d (文件夹目录）
vue-cli如何添加less 以及sass
12-01
vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了 npm install node-sass --save-dev npm install sass-loader --save-dev 如果是淘宝镜像直接运行cnpm是一样的效果 然后在组件或者视图中给样式加上语言就可以了 <style lang="sass" scoped> ..... </style> 这里需要说明一下scoped是让样式只在当前组件或者视图中起作用的。 less的话也是一样 需要装两个loader npm install less --save-dev npm i
vue-cli中less的使用
m_uncle的博客
05-23 783
第一步 安装less和less-loader，命令如下    npm install less less-loader --sava-dev第二步 安装成功之后，打开build/webpack.base.conf.js，在module.exports = 的对象中添加如下代码    module.exports = {        module: {            rules: [   ...
vue-cli 创建的项目配置less
qq_38358436的博客
06-19 561
安装 less 和 less-loader npm i less less-loader --save-dev 修改配置文件 找到 /client/build/webpack.base.conf.js 在 module 的rules对象中添加一个 rule { test: /\.less$/, use: ['style-loader', {loader: 'css...
vue-cli 构建的项目中集成less
zeroyulong的博客
03-28 663
vue-cli 构建的项目中不支持less或者sass，需开发者手动引入。步骤如下：一、npm 安装less 和 less-loader，打开项目目录运行指令npm install less less-loader --save-dev二、打开文件目录build/webpack.base.conf.js，module.rules中添加如下代码module.exports = { module: ...
关于webstorm编辑器识别less的问题，我是在vue里使用less
前端kk的博客
04-02 1547
不知道是不是版本的原因，大家请记住最新的webStorm（2017版的）是这样配置less的&lt;style scoped lang="less" type="text/less"&gt; export default{ ··· } &lt;/style&gt;是改type="text/less" 改 rel 是没用的。...
vue-cli项目使用 less
江湖行骗老中医
11-01 181
在vue-cli中构建的项目是可以使用less的，但是查看package.json可以发现，并没有less相关的插件，所以我们需要自行安装。 第一步：安装 npm install less less-loader --save-dev 即通过npm安装less和less-loader，并记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用，所以就不将之记录在 ...
vue-cli3 配置less全局变量
陈同学的博客
07-16 2072
安装依赖包 npm i style-resources-loader-D 根目录 vue.config.js const path = require('path') module.exports = { chainWebpack: config => { const types = ['vue-modules', 'vue', 'normal-mo...
vue-cli 使用less
weixin_39205240的博客
07-05 167
npm install less less-loader --save-dev安装完成就可以使用了。
Vue-cli3.0配置实战与注意事项
本文将详细介绍Vue CLI 3.0的配置和使用中的注意事项，以及如何根据项目需求进行功能定制。" Vue CLI 3.0 的核心特性在于其简洁的命令行界面和高度可定制化。通过`npm install -g @vue/cli`全局安装后，可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值