uniapp [plugin:vite:css] [sass] @import '../mixins/create.scss' 报错如何解决？

在uniapp项目中，使用vite构建时遇到报错：[plugin:vite:css] [sass] @import '../mixins/create.scss'。这个错误出现在引入scss文件时，提示找不到对应的文件路径。项目目录结构确认是正确的，但依然报错。请问该如何解决这个问题？需要检查哪些配置或调整路径写法？

2 回复

检查路径是否正确，确保create.scss文件存在。若使用相对路径，可尝试改为绝对路径或别名路径。


在 UniApp 中使用 Vite 构建时，遇到 @import '../mixins/create.scss' 报错，通常是由于路径解析或 Sass 配置问题导致。以下是常见解决方案：

1. 检查文件路径

确保 create.scss 文件存在于 ../mixins/ 目录中，路径相对于当前 SCSS 文件正确。例如：

  • 当前文件：src/styles/main.scss
  • 导入路径：@import '../mixins/create.scss';（对应 src/mixins/create.scss）

2. 配置 Vite 的 Sass 路径别名

在 vite.config.js 中，添加 Sass 路径解析配置：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${path.resolve(__dirname, 'src/mixins/create.scss')}";`
      }
    }
  }
});

或使用相对路径别名：

scss: {
  additionalData: `@import "@/mixins/create.scss";`,
}

需确保在 vite.config.js 中配置了 @ 别名：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

3. 检查 Sass 依赖

确保项目中安装了 sass 或 node-sass：

npm install sass --save-dev

4. 验证文件内容

确认 create.scss 文件内容无误，无语法错误（如缺少分号、括号等）。

5. 重启开发服务器

修改配置后，重启服务：

npm run dev

总结

优先检查路径是否正确，再通过 Vite 配置 Sass 预处理器选项。如果问题持续，检查文件权限或控制台完整错误信息以进一步排查。

回到顶部