vue2에서 less를 사용하는 방법에 대한 간단한 튜토리얼

亚连
풀어 주다: 2018-05-28 17:03:16
원래의
2501명이 탐색했습니다.

이 글에서는 vue2에서 less를 사용하는 간단한 튜토리얼을 주로 소개합니다. webpack을 수동으로 설정할 필요가 없기 때문에 less 및 less-loadder만 설치하면 됩니다. 한 가지 설명하자면, npm init webpack 프로젝트 이름을 사용하여 만든 프로젝트라면 webpack을 수동으로 구성할 필요가 없습니다

Vue에서 less를 사용하는 것은 매우 간단합니다. and less-loadernpm init webpack 项目名 的方式创建的项目,无需手动配置webpack

所以再vue中使用less就非常简单了,只需要安装less, less-loader就行了

步骤

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev
로그인 후 복사

如果安装成功那么就可以再vue组件中使用less了

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }
로그인 후 복사

补充:

vue中 如何使用less

http://element.eleme.io/ //

elementUI是基于vue2

vue中使用less

首先vue开发环境已经安装成功

当所有东西都 准备好之后 :

第一步:

安装less依赖,npm install less less-loader --save

단계

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
로그인 후 복사

설치에 성공하면 vue 구성 요소에서 less를 사용할 수 있습니다

(或者
@import &#39;./index.less&#39;; //引入全局less文件
)。
(
html中直接引入:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)
로그인 후 복사
추가:

vue에서 less를 사용하는 방법

http://element.eleme.io/ //

elementUI는 vue2를 기반으로 합니다.

less는 vue에서 사용됩니다

우선 vue 개발 환경이 설치되었습니다. 성공적으로

모든 것이 준비되면:

1단계 :

덜 의존성 설치, npm install less less-loader --save

2단계: 🎜🎜webpack.config.js 파일 수정 그리고 외부 less 를 지원하도록 로더를 설정하고 원본 코드에 🎜rrreee🎜 를 추가하면 이제 기본적으로 설치가 완료됩니다. 그런 다음 사용 시 스타일 태그에 lang="less" 를 추가하여 코드를 적게 작성합니다( 스타일 태그에만 범위를 추가하세요. 이 범위는 유효합니다.)🎜rrreee🎜위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜Django에서 jquery ajax post 데이터를 사용할 때 403 오류에 대한 해결 방법🎜🎜🎜🎜Django 프레임워크에서 ajax post 메서드를 사용하는 방법🎜🎜🎜🎜JQuery ajax가 json을 반환할 때 중국어 잘못된 코드를 해결하는 방법🎜🎜

위 내용은 vue2에서 less를 사용하는 방법에 대한 간단한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿