Vue2.0에서 전역 스타일을 설정하는 단계에 대한 자세한 설명

이번에는 Vue2.0에서 글로벌 스타일을 설정하는 방법을 단계별로 자세히 설명하겠습니다. 노트란 무엇인가요?

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

1단계: main.js의 src 디렉터리에 다음 코드

require('!style-loader!css-loader!less-loader!./common/less/index.less')

를 추가합니다. 이 코드는

항목 파일

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

require('./common/less/index.less')

2단계: 빌드 디렉터리의 webpack.base.conf.js 구성 모듈에서 규칙 아래에 두 개의 모듈만 추가하면 됩니다

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

나중에 덜 사용해야 한다면 스타일

<style></style>

에 lang

속성

을 추가하세요. 공개 파일이 많은 경우에는 모두 하나의 파일에 넣고 공개 파일 링크를 통해 여러 스타일 파일에 대한 전역 스타일을 구현할 수 있습니다. 이 기사의 사례를 읽은 후 해당 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

element-ui 테이블 구성 요소를 재사용하는 방법

js 범위 사용에 대한 자세한 설명

회전 애니메이션을 만드는 JS+캔버스

위 내용은 Vue2.0에서 전역 스타일을 설정하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!