vue 引入 scss 文件到 main.js 报错

 在引入公共 scss 文件的时候,发现一直编译不成功,报错如下,

This relative module was not found: * ./main. in ./src/main.js

本来以为是路径写错了,直接放到平级目录,还是引入不成功,结果发现是sass loader 的问题 

找到 webpack.base.conf.js 文件,删掉以下配置

{

   test: /\.scss$/,

   loaders: ["style", "css", "sass"]

}

因为vue-cli已经配置好scss的编译了,不用再添加了

<think>好的,我需要帮助用户解决在Vue 2的UniApp项目中正确引入UView 1.x组件的问题。首先,我需要回忆相关的引用内容,看看是否有现成的解决方案。 根据用户提供的引用,引用[1]、[2]、[3]都提到了在main.js引入uView的JS库,并且使用Vue.use(uView)。特别是引用[3]明确指出,在Vue 2项目中,需要在main.js引入并使用uView的JS库,放在import Vue之后。此外,引用[2]提到配置easycom实现按需加载,这对于组件自动导入很重要。 接下来,我需要确认UView 1.x的安装步骤是否包括npm安装或者HBuilder X的插件市场安装。但用户的问题是关于引入方法,可能已经安装了组件库,需要配置。根据引用[1]和[3],安装后的配置主要是在main.js引入,并配置easycom。 需要注意的是,UView 1.x和2.x的引入方式可能不同,用户明确询问的是1.x版本,所以需要确保步骤适用于1.x。引用[1]提到的是uView2.x,但用户需要1.x,所以可能需要调整。不过,引用[3]中的方法可能适用于1.x,因为Vue.use的语法在Vue 2中通用。 另外,引用[2]中的easycom配置路径可能不同,需要根据UView 1.x的实际路径调整。例如,路径可能是'@/uni_modules/uview-ui/components/u-$1/u-$1.vue',而引用[2]中的例子是vk-uview-ui,这可能因版本而异,所以需要确认正确的路径。 可能还需要考虑引入SCSS变量文件,这在引用[1]和[3]中没有提到,但通常组件库需要样式文件引入。比如在App.vue引入主题文件。 总结步骤应该是:1. 安装uView 1.x(通过插件市场或npm);2. main.js引入并use;3. 配置easycom自动导入组件;4. 引入样式文件。需要确保每一步的路径和语法正确,特别是针对Vue 2和UniApp的环境。 用户可能遇到的问题包括路径错误、未正确配置easycom导致组件无法识别,或者样式未加载。需要提醒用户检查这些步骤,特别是路径是否正确,以及是否需要重启项目。 最后,生成相关问题时要围绕UView的引入、配置、优化以及版本差异等方面提问。</think>### 在Vue 2的UniApp项目中引入UView 1.x的完整步骤 #### 1. **安装UView组件库** - **方式一(推荐):通过HBuilder X插件市场安装** 在HBuilder X中右键项目,选择「插件市场」→ 搜索「uView UI」→ 选择1.x版本安装[^1][^3]。 - **方式二:通过npm安装** 在项目根目录执行: ```bash npm install uview-ui@1.x ``` #### 2. **配置main.js** 在根目录的`main.js`中添加以下代码(**必须放在`import Vue`之后**): ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` #### 3. **配置Easycom自动导入** 在`pages.json`中添加`easycom`规则,实现组件按需加载: ```json { "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" } } ``` **注意路径匹配**:若通过npm安装,路径可能为`node_modules/uview-ui/components/u-$1/u-$1.vue`[^2]。 #### 4. **引入样式文件** 在`App.vue`的`<style>`标签中引入主题文件: ```scss @import "uview-ui/index.scss"; ``` #### 5. **重启项目** 修改配置后需**重新编译项目**,否则配置不生效[^4]。 --- ### 验证是否成功 尝试在页面中使用UView组件,例如添加按钮: ```html <template> <u-button type="primary">测试按钮</u-button> </template> ``` 若按钮正常显示且无报错,则说明配置成功。 --- ### 常见问题排查 1. **组件未找到错误** - 检查`easycom`路径是否与组件实际存放路径一致 - 确认是否重启项目 2. **样式丢失** - 检查`App.vue`中是否正确定义了`@import`语句 - 确保`scss`预处理器已安装 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值