Vue3安装scss教程

在开发新项目的时候打算使用scss，新项目使用的是vue3框架，所以发一下scss安装的教程

scss是sass的超集，其实可以说是安装sass

安装依赖

npm install node-sass -S
npm install sass-loader -S
npm install style-loader -S
npm install sass -S
为什么是一条条的不是全部一起安装？

因为在安装的时候可能会遇到报错
①sass-loader和style-loader报错

warning " > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^5.0.0".
这是一个警告，很明显，和webpack版本不适应
所以我们安装对应版本的webpack
yarn add webpack@^5.0.0
用yarn和npm都可以

②node-sass报错
gyb ....
…省略一大堆信息
安装对应版本node-sass版本
npm install node-sass@6
再次yarn，报错消失

vite.config.js配置

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

使用

记得在使用的时候加上lang="scss"

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