vue3中使用scss

执行下面三行命令（亲测有效）

npm install sass-loader -S 
npm install style-loader -S 
npm install sass -S

 

下面的也可以

安装依赖

 npm install sass sass-loader --save-dev

局部使用

<style scoped lang="scss">

...定义样式

</style>

 

全局共享样式变量，在assets/style 文件夹中定义 mixin.scss文件，并设置一些样式；在其他文件使用定义的变量前需要引入样式文件表

 

 

在vite.config.ts文件中添加红色代码部分

export default defineConfig({
  css:{
    preprocessorOptions:{
      scss:{
        additionalData:'@import "@/assets/style/mixin.scss";'
      }
    }
  },
  plugins: [
    vue(),
    VueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

 scss 在vue3中使用 深入类名 ::deep   变成了 :deep(.类名)