vite 配置使用 scss

最新推荐文章于 2025-09-14 21:27:16 发布

原创最新推荐文章于 2025-09-14 21:27:16 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #css

文章介绍了如何在项目中安装sass-loader并配置全局scss文件。首先，通过npm安装sass-loader并保存为开发依赖。然后，在assets目录下创建.scss全局样式文件，并在vite.config.ts中设置预处理器选项，导入全局scss文件。最后，配置resolve的alias以引用src目录。

安装 sass-loader

npm install sass-loader --save-dev

如果需要配置全局scss 文件就在 assets目录下创建.scss文件

然后在vite.config.ts中引入

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