Tutorial de instalación de Vue3 scss

Planeo usar scss cuando desarrolle un nuevo proyecto. El nuevo proyecto usa el marco vue3, así que publicaré un tutorial sobre la instalación de scss

scss es un superconjunto de sass, de hecho, se puede decir que instala sass

instalar dependencias

npm install node-sass -S
npm install sass-loader -S
npm install style-loader -S
npm install sass -S
¿Por qué no se instalan todos juntos uno por uno?

Porque puede encontrar errores durante la instalación
① Errores de informe de sass-loader y style-loader

warning " > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^5.0.0".
Esto es una advertencia, obviamente, no es compatible con la versión webpack,
por lo que podemos instalar la versión correspondiente de webpack con yarn y npm
yarn add webpack@^5.0.0

② node-sass informa de un error
gyb ....
... se omite mucha información
Instale la versión correspondiente de node-sass
npm install node-sass@6
e hilo de nuevo, el error desaparece

configuración vite.config.js

export default defineConfig({
    
    
	plugins: [vue()],
    // 这个是配置scss
	pluginOptions: {
    
    
		'style-resources-loader': {
    
    
			preProcessor: 'scss',
			patterns: []
		}
	},
})

usar

Recuerde agregar al usarlang="scss"

<style lang="scss" scoped>
.wrapped{
    
    
	display:flex;
	.contain{
    
    
	background:pink;
	}	
}
</style>