Home > Article > Web Front-end > What to do if there is an error when compiling SASS in vue project
Solution to vue project compilation sass error: 1. Use the image source "cnpm install node-sass sass-loader --save-dev" to install sass; 2. Change "sass" in "package.json" -loader" version is ""sass-loader": "^7.3.1","; 3. Use it directly in the page or use @ instead of src.
The operating environment of this tutorial: Windows 10 system, sass-loader version 7.3.1, Dell G3 computer.
What should I do if there is a sass compilation error in the vue project?
Solve the error reporting problem when vue uses Sass
Installation:
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.orgChange sass-loader version in package.json
"sass-loader": "^7.3.1",
Use:
Use directly or @ instead of src in the page (@ does not need to be configured in 3.x, but needs to be configured in the webpack file in 2.x)
Problem description:
The following problem is an error I encountered when using 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 Such problems are generally caused by a lack of related dependencies. For this example, carefully read the error message and grasp the keywords, vue-style-loader! css-loader, which means there is a problem when css is parsed.
Therefore, the solution depends on the situation and depends on the CSS language you use, whether it is regular or less or sass.
regular, execute
npm install stylus-loader css-loader style-loader --save-dev2. If encountered in
less, execute
npm install less less-loader --save-dev3. If you encounter it in
sass, just execute
npm install sass sass-loader --save-devto install the dependencies
or
$npm intall sass-loader --save ; $npm install node-sass --save
If you don’t know, okay, you three Are you going to execute them all?.
Generally this problem will only occur when initializing the configuration. If the project is already intact, it will have been configured in package.json and can be installed directly.
Recommended learning: "vue video tutorial"
The above is the detailed content of What to do if there is an error when compiling SASS in vue project. For more information, please follow other related articles on the PHP Chinese website!