> 웹 프론트엔드 > JS 튜토리얼 > Vue2.0 전역 스타일 인스턴스 공유 설정

Vue2.0 전역 스타일 인스턴스 공유 설정

小云云
풀어 주다: 2018-01-18 11:36:08
원래의
2625명이 탐색했습니다.

이 글은 Vue2.0의 전역 스타일(less/sass 및 css)을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

Vue의 전역 스타일을 설정하려면 여러 단계가 필요합니다(sass인 경우 sass로 덜 변경)

1단계: 다음 코드를 src 디렉터리의 main.js에 추가합니다. 이는 항목 파일입니다


require('!style-loader!css-loader!less-loader!./common/less/index.less')
로그인 후 복사

Vue 버전 1.0에서는 이렇게 작성할 수 있지만 버전 2.0에서는 작동하지 않습니다. 구문 분석 오류를 알리는 오류가 보고됩니다


require('./common/less/index.less')
로그인 후 복사

두 번째 단계: webpack.base.conf. 모듈을 구성하려면 규칙 아래에 두 개의 모듈만 추가하면 됩니다.


module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}
로그인 후 복사

3단계: 오류가 보고되면 위의 종속성을 설치하지 않았을 수 있습니다. 추가해야 합니다. 루트 디렉터리의 package.json 파일에 종속성

4단계: 명령 창에서 명령을 실행하여 종속성


npm install
로그인 후 복사

linux(ubuntu, deepin)를 설치합니다. Mac OS 시스템에서는 권한이 부족하므로 권한을 받아야 한다는 메시지가 표시됩니다. 그런 다음 권한만 얻으면 됩니다.

sudu npm install
로그인 후 복사
공개 파일이 많으면 모두 하나의 파일에 넣고 공개 파일 링크를 사용하여 여러 A 스타일 파일 글로벌 스타일을 구현할 수 있습니다.


vue.js 학습 튜토리얼에 관해서는 특별한 vue.js를 클릭하세요. 컴포넌트 학습 튜토리얼과 Vue.js 프론트엔드 컴포넌트 학습 튜토리얼을 학습하세요.


관련 추천:

Css 로컬 및 글로벌 스타일 코드의 JavaScript 수정에 대한 자세한 설명

[Bootstrap] 글로벌 스타일 (4)_html/css_WEB-ITnose


[Bootstrap] 글로벌 스타일 (4) - 한여름, 광년

위 내용은 Vue2.0 전역 스타일 인스턴스 공유 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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