- 安装scss
npm install sass --save
- 在vite.config.ts中进行配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
//define global scss variable
scss: {
additionalData: `@import "@/assets/mixin.scss";`
}
}
}
})
- 在mixin.scss中定义一个变量
$color: red;
- 在路由中使用
<style scoped lang="scss">
.login {
width: 200px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// 这里就引入了全局的scss变量 $color
background: $color;
button {
margin-top: 10px;
}
}
</style>
