vite 配置使用 scss

最新推荐文章于 2025-06-26 17:31:50 发布

卷饼码农

最新推荐文章于 2025-06-26 17:31:50 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： scss 前端 css

本文链接：https://blog.youkuaiyun.com/aaajavac/article/details/131242131

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 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))
    }
  }
})