Vite 配置 Scss
npm
npm install sass-loader sass
在package.json 中查看安装结果
......
"devDependencies": {
......
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
......
},
......
配置 vite.config.js 文件
......
export default defineConfig({
//新增
css:{
preprocessorOptions:{
scss:{
additionalData:'@import "./src/styles/test.scss";' //引入scss文件
}
}
}
})
......
检测是否引入成功
- 在 test.scss (自己新建的) 中写入
- 在任意一个 .vue 文件中使用 scss
<template>
<div class="text-color">Hello world</div>
</template>
<style lang="scss">
.text-color{
color: $red;
}
</style>
- 如果文字显示为红色,说明配置成功