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

## 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.org

Change 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.

1. If encountered in

regular, execute

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

2. If encountered in

less, execute

npm install less less-loader --save-dev

3. If you encounter it in

sass, just execute

npm install sass sass-loader --save-dev

to 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!