如何在vite项目中使用scss预处理器

Vite 作为一款新的开发工具，能提高我们的开发效率，然而社区还未真正成熟，很多功能还需要我们摸索，今天想要在项目中使用 css 预处理器-scss，记录一下自己踩的坑。

通过查阅官方文档，可以通过以下两种途径来使用 scss 文件。

首先需要在项目中安装 sass 库，yarn add sass -D，接下来使用下面的方法。

第一种方法

在 defineCofing 方法的 css.processorOptions 对象中新增配置

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "./src/styles/_animations.scss";
          @import "./src/styles/_variables.scss";
          @import "./src/styles/_mixins.scss";
          @import "./src/styles/_helpers.scss";
        `,
      },
    },
  },
});

第二种方法

首先在 vite.config.js 引入 vue 插件

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

在入口组件文件里面引入 scss 文件

<template>...</template>
<script>
  ...
</script>

<style lang="scss">
  @import "./assets/style.scss";
</style>

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/faq/how-to-use-scss-in-vite

第一种方法​

第二种方法​

第一种方法

第二种方法