Vue project installs sass package

1. Install dependent packages

	npm i --save-dev sass-loader
	npm i --save-dev node-sass

2. Configuration rules

Find the build folder in the vue project, where there are three files about webpack, namely:

• webpack.base.conf.js literally means the basic configuration of webpack
• configuration file for webpack.dev.conf.js development environment
• configuration file for webpack.prod.conf.js production environment

webpack.base.conf.js

• Configure webpack compilation entry
• Configure webpack output path, name and static file path
• Configure processing rules and naming rules for different modules

webpack.dev.conf.js

• Add hot-reload related code to entry chunks
• Merge base webpack config
• Use styleLoaders
• Configure Source Maps
• Configure the webpack plugin

webpack.prod.conf.js

• Merge base webpack config
• Use styleLoaders
• Configure the output of webpack
• Configure the webpack plugin
• Webpack plugin configuration in gzip mode
• webpack bundle analysis

We want to add the sass part to the whole project and set rules for it, so in the basic configuration file, find the rules part in the base file and add the following code:

	{
test: /\.scss$/,
loader:['style','css','sass']
}

Supplement: / scss is an upgrade of sass /

problems

After the installation is completed and used, there may be a problem that they do not match because the sass version is too high. Sass-loader generally uses version 7.3.1, and the corresponding node-sass version should also be lowered. Generally, 4.12.0 is used