首页 > 建站教程 > 前端框架 >  vue3+vite使用scss正文

vue3+vite使用scss

vue3+vite安装和使用scss详细步骤:

1、安装依赖

1npm install sass -d


2、配置vite.config.js

01export default defineConfig({
02  plugins: [vue()],
03  css: {
04    preprocessorOptions: {
05      scss: {
06        // 全局引入 style.scss
07        additionalData:'@import "@/style.scss";'
08      }
09    }
10  },
11  resolve: {
12    // 配置路径别名
13    alias: {
14      '@': path.resolve(__dirname,'./src')
15    },
16  }
17})


3、在对应目录下创建main.scss

1$blue: #3385ff


4、在对应文件引用变量:

1<style scoped>
2div{
3  color: $blue;
4}
5</style>


搞定!