vue2+less 사용에 대한 자세한 설명

이번에는 vue2+less 사용에 대한 자세한 설명을 가져왔습니다. vue2+less 사용 시 주의사항은 무엇인가요?

따라서 vue에서 less를 사용하는 것은 매우 간단합니다. installless, less-loader

단계

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

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

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

보충 사항 ：

How to use less in vue

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

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

use less in vue

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

모든 것이 준비된 후:

1단계:

덜 종속성 설치, npm install less less-loader --save

2단계:

webpack.config.js 파일을 수정하고, 종속성을 로드하도록 로더를 구성하여 외부 덜 지원하도록 합니다. , 원본 코드에

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

추가 이제 기본적으로 설치가 완료되었으니 사용시 스타일 태그에 lang="less"를 추가하면 코드 작성이 줄어듭니다(스타일 태그에 범위 지정을 추가하면 이 코드에서만 유효하다는 의미입니다). 범위)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS는 왼쪽 및 오른쪽 목록을 교환하는 기능을 구현합니다.

애플릿 공유 페이지에서 이전 페이지로 돌아가는 단계에 대한 자세한 설명

위 내용은 vue2+less 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!