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

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!