vue 프로젝트 에서 less 공공 변 수 를 추출 합 니 다.
/*index.less*/
/* Tip: ，.vue
less 전역 변수 도입 방법 1
css.loaderOptions less 를 사용 합 니 다.이 방법 은 변수 key:value 할당 만 지원 합 니 다.
module.exports = {
css: {
loaderOptions: {
less: {
globalVars: {
"@color": "#f00"
}
}
}
}
}
less 전역 변수 도입 방법 2
pluginOptions 를 사용 하려 면 vue add style-resources-loader 명령 을 실행 해 야 합 니 다.명령 을 실행 하면 vue-cli-plugin-style-resources-loader 가 자동 으로 어떤 사전 컴 파일 언어 를 사용 하 는 지 알려 줍 니 다.선택 한 자동 설정 에 따라 참조 파일 의 경 로 를 입력 하 십시오.
우정 알림:이 방법 으로 위의 플러그 인 을 설치 하고 이 방안 을 포기 하면 컴 파일 할 때 오류 가 발생 할 수 있 습 니 다.npm uninstall vue-cli-plugin-style-resources-loader 에서 이 플러그 인 을 마 운 트 해제 할 수 있 습 니 다.
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: "./src/assets/variable.less"
}
}
}
주:밟 은 구 덩이 는 less 파일 의 줄 마다 코드 를 추가 해 야 합 니 다.분점,그렇지 않 으 면 컴 파일 이 잘못 될 것 이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
