uni-app开发微信小程序整合sass后出现热重载报import错误

问题描述:

原本是没有问题的,因为一些颜色定义想做一个全局的,就引用了sass,然后编译运行,正常;然后改代码,只要触发热重载,微信开发工具就一定会报错,报script中引入的一部分js引入错误.关掉开发工具重新编译后又一切正常,但一改代码就报错…
报错内容如下,随机报引用错误,比如报A页面,我删掉该处,就去报B或C等,引用的组件也会跟着报

TypeError: Cannot read property 'call' of undefined at webpack require (runtime.js?t=wechat&.c5aee146610cb3a:164) at Object._ (uni-icons.vue:13) at webpack require (runtime.js?t=wechat&.c5aee146610cb3a:164) at webpack require (runtime.js?t=wechat&.c5aee146610cb3a:164) at Module._ (uni-icons.vue?31b9:1) at Module.(uni-icons.vue?e83a:1) at webpack require (runtime.js?t=wechat&.c5aee146610cb3a:164) at Object.uni_modules/UniIcons/components/UniIcons/UniIconsCreateComponent(uni-icons.wue?cdcd:2) at webpack require (runtime.js?t=wechat&.c5aee146610cb3a:164) at checkDeferredModules(runtime.js?t=wechat&.c5aee146610cb3a:103)
(env: windows,mp,1.06.2409140; lib:3.7.2)

我是解除sass的引用,然后删掉与其相关的文件就恢复正常了;不能定义全局样式变量不方便,谁有解决方法吗?

更多关于uni-app开发微信小程序整合sass后出现热重载报import错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼

更多关于uni-app开发微信小程序整合sass后出现热重载报import错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在使用uni-app开发微信小程序并整合Sass（SCSS）时，遇到热重载时报import错误通常是由于配置或路径问题导致的。以下是一些可能的解决方案和相关的代码配置示例，帮助你解决这一问题。

1. 确保Sass Loader配置正确

首先，确保你的项目中已经正确配置了Sass Loader。在uni-app项目中，通常不需要手动配置Webpack，但如果你使用了自定义的Webpack配置，确保Sass Loader已经包含在内。

// vue.config.js (如果你使用了自定义的Webpack配置)
module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleLoader(config.module.rule('scss').oneOf(type)))
  },
}

function addStyleLoader(rule) {
  rule
    .use('style-loader')
    .loader('style-loader')
    .end()
    .use('css-loader')
    .loader('css-loader')
    .end()
    .use('sass-loader')
    .loader('sass-loader')
    .options({
      // Sass options here
    })
    .end()
}

2. 检查SCSS文件导入路径

确保你的SCSS文件导入路径是正确的。在uni-app中，路径通常是相对于当前文件的。

// 在一个Vue组件的<style lang="scss">标签内
@import "@/common/styles/variables.scss";

这里的@符号通常代表src目录的绝对路径，确保你的项目结构与此匹配。

3. 使用相对路径导入

如果绝对路径不起作用，尝试使用相对路径导入SCSS文件。

// 假设variables.scss在同一目录下的styles文件夹中
@import "./styles/variables.scss";

4. 清理和重启项目

有时候，简单的清理和重启项目可以解决缓存导致的问题。

# 停止运行中的项目
# 清理项目（如删除dist或build目录）
# 重新启动项目

5. 检查uni-app和依赖版本

确保你使用的uni-app和相关依赖（如@dcloudio/types、sass、sass-loader等）都是最新的，或者至少是兼容的版本。

# 更新uni-app CLI和相关依赖
npm update @dcloudio/uni-app
npm update sass sass-loader