uniapp app.vue 使用@use 引入uni.scss报错是怎么回事？

在uniapp的app.vue中，使用@use引入uni.scss时出现报错是怎么回事？错误提示是"SassError: @use rules must be written before any other rules"。我已经确保@use语句放在了样式文件的最前面，但还是报错。请问这个问题的正确解决方法是什么？

2 回复

可能是路径错误或uni.scss文件不存在。检查路径是否正确，确保uni.scss在项目根目录下。也可能是编译器版本问题，尝试更新HBuilderX或重新安装依赖。


在uni-app中，app.vue 使用 @use 引入 uni.scss 报错，通常是因为 语法错误 或 配置问题。以下是常见原因和解决方案：

1. 语法错误

  • 错误写法：在 app.vue 的 <style> 标签中直接使用 @use。
    <style lang="scss">
@use '@/common/uni.scss'; // 错误：@use 不能在 Vue 单文件组件的 <style> 中直接使用
</style>
  • 原因：@use 是 Sass 的模块语法，适用于独立的 .scss 文件，但 不适用于 Vue 单文件组件内的 <style> 标签。
  • 正确做法：使用 @import 替代 @use。
    <style lang="scss">
@import '@/common/uni.scss'; // 正确：使用 @import
</style>

2. 路径错误

  • 检查 uni.scss 文件路径是否正确。例如：
    • 如果 uni.scss 在 common 目录下，路径应为 @/common/uni.scss。
  • 确保项目根目录有正确的 vue.config.js 或 sass 配置（HBuilderX 项目通常无需额外配置）。

3. Sass 版本兼容性问题

  • @use 是 Dart Sass 1.23.0+ 引入的语法，如果项目使用的是旧版 Node Sass 或 低版本 Dart Sass，可能不支持。
  • 解决方案：
    1. 检查 package.json 中的 sass 或 node-sass 版本。
    2. 升级到 Dart Sass（推荐）：
      npm install sass@latest --save-dev
    3. 或在 vue.config.js 中配置：
      module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // 使用 Dart Sass
      },
    },
  },
};

4. 全局配置 uni.scss

  • 如果需要在多个组件中使用 uni.scss，建议在 vue.config.js 中全局引入：
    module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/common/uni.scss";`, // 全局引入
      },
    },
  },
};
  • 这样无需在每个组件中手动引入。

5. 检查文件内容

  • 确保 uni.scss 文件语法正确，无错误。

总结

  • 在 app.vue 中，使用 @import 而非 @use 引入 SCSS 文件。
  • 确保 Sass 版本支持所需语法。
  • 考虑全局配置避免重复引入。

如果仍有问题，请提供具体的错误信息和代码片段，以便进一步排查。

回到顶部