Vue 프로젝트에서 SASS를 컴파일할 때 오류가 발생하면 어떻게 해야 할까요?-프런트엔드 Q&A-php.cn

Vue 프로젝트에서 SASS를 컴파일할 때 오류가 발생하면 어떻게 해야 할까요?

藏色散人

풀어 주다： 2023-01-05 16:20:07

원래의

2522명이 탐색했습니다.

vue 프로젝트 컴파일의 sass 오류 해결 방법: 1. 이미지 소스 "cnpm install node-sass sass-loader --save-dev"를 사용하여 sass를 설치합니다. 2. "패키지에서 "sass-loader" 버전을 변경합니다. .json" ""sass-loader"입니다: "^7.3.1","; 3. 페이지에서 직접 사용하거나 src 대신 @를 사용하세요.

Vue 프로젝트에서 SASS를 컴파일할 때 오류가 발생하면 어떻게 해야 할까요?

이 튜토리얼의 운영 환경: Windows 10 시스템, sass-loader 버전 7.3.1, Dell G3 컴퓨터.

vue 프로젝트에서 sass 오류가 컴파일되면 어떻게 해야 하나요?

vue가 Sass를 사용할 때 발생하는 오류 문제 해결

sass:

설치:

npm config set registry https://registry.npm.taobao.org/

//sass-node报错的话，使用镜像源cnpm install node-sass sass-loader --save-dev 再安装一次
npm install node-sass --registry=https://registry.npm.taobao.org

로그인 후 복사

package.json에서 sass-loader 버전 변경

"sass-loader": "^7.3.1",

로그인 후 복사

용도:

페이지에서 src 대신 @ 또는 직접 사용(3.x에서는 @를 설정할 필요가 없고, 2.x에서는 webpack 파일에서 설정해야 함)
Vue 프로젝트에서 SASS를 컴파일할 때 오류가 발생하면 어떻게 해야 할까요?

문제 설명:

sass 오류 보고서를 사용할 때 다음 문제가 발생했습니다.

*!!vue-style-loader!css-loader?{“sourceMap”:true}!
../../../../vue-loader/lib/style-compiler/index?{“vue”:t
rue,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{“so
urceMap”:true}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=style
s&index=0!./index.vue in ./node_m
odules/vux/src/components/alert
/index.vue

로그인 후 복사

Solution
이러한 종류의 문제는 일반적으로 관련 종속성이 부족하여 발생합니다. 이 예에서는 오류 메시지를 주의 깊게 살펴보고 키워드 vue-를 가져옵니다. style-loader!css-loader 설명은 CSS를 구문 분석하는 중에 문제가 발생했습니다.
그래서 해결책은 상황에 따라, 사용하는 CSS 언어에 따라 일반인지, 이하인지, 사스인지에 따라 달라집니다.

1. normal에서 발생하면

npm install stylus-loader css-loader style-loader --save-dev

로그인 후 복사

를 실행합니다. 2. less에서 발생하면

npm install less less-loader --save-dev

로그인 후 복사

를 실행합니다. 3. sass에서 발생하면

npm install sass sass-loader --save-dev

로그인 후 복사

를 실행합니다. dependency
또는

 $npm intall sass-loader --save ; $npm install node-sass --save

로그인 후 복사

모른다면 세 가지 모두 수행하시나요?.

일반적으로 이 문제는 구성을 초기화할 때만 발생합니다. 전체 프로젝트인 경우 package.json에 구성되어 있으며 직접 설치할 수 있습니다.

추천 학습: "vue 비디오 튜토리얼"

위 내용은 Vue 프로젝트에서 SASS를 컴파일할 때 오류가 발생하면 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!