解决vue-cli创建项目的loader问题

在使用vue-cli项目创建项目中，使用sass等预编译css语言时，不需要在config中配置，只需要在项目中安装相应loader即可。

例如：

1、在项目中使用sass

$ npm i node-sass -D
$ npm i sass-loader -D

2、当使用vuex时，即使安装vux和vux-loader，在项目中使用了vux的组件，项目就无法启动，报错如下：

These dependencies were not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loader/lib/style-compiler/index?{"vue":true,"id":"da
ta-v-28d8bf8a","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{"sourceMap":false}!..
/../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./~/vux/src/components/ce
ll/index.vue
* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loader/lib/style-compiler/index?{"vue":true,"id":"da
ta-v-76475f48","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{"sourceMap":false}!..
/../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./~/vux/src/components/gr
oup/index.vue

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loade
r/lib/style-compiler/index?{"vue":true,"id":"data-v-28d8bf8a","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-le
ss-loader.js!less-loader?{"sourceMap":false}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&i
ndex=0!./index.vue !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loader/lib/style-compiler/index?{"v
ue":true,"id":"data-v-76475f48","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{"sou
rceMap":false}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue
> Listening at http://localhost:8080

大概看一眼可以确定loader出了问题，但是我已经安装了sass编译的依赖，依然无法解决错误。

后来去vux的包中看了一下，组件中使用的是less，于是安装less依赖解决问题。

以上这篇解决vue-cli创建项目的loader问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 深入理解vue-loader如何使用
  • Vue + Webpack + Vue-loader学习教程之功能介绍篇
  • 详解用vue-cli来搭建vue项目和webpack
  • Vue使用vue-cli创建项目
赞 (0)

相关推荐

  • Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理. 对每个

  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

  • 深入理解vue-loader如何使用

    深入理解vue-loader如何使用

    .vue格式的文件使用类似HTML的语法描述vue组件.每个.vue文件包含三种最基本的语言块:, <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .exa

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • 解决vue-cli创建项目的loader问题

    在使用vue-cli项目创建项目中,使用sass等预编译css语言时,不需要在config中配置,只需要在项目中安装相应loader即可. 例如: 1.在项目中使用sass $ npm i node-sass -D $ npm i sass-loader -D 2.当使用vuex时,即使安装vux和vux-loader,在项目中使用了vux的组件,项目就无法启动,报错如下: These dependencies were not found: * !!vue-style-loader!css-l

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • 解决vue cli使用typescript后打包巨慢的问题

    前言 最近新开了一个项目,虽然用的是 vue 技术栈,但是为了项目的健壮性,还是强上了 typescript, 于是引出了下面的问题. 问题 之前使用过 ts-loader 打包 react 项目,给我的感觉就是巨慢,开发环境下,每次保存后,需要等10秒钟左右才能构建完成,当时为了解决这个问题,把 ts-loader 替换成了 babel 的 typescript 插件,结果是非常的快,每次保存一秒中之内就能完成构建.这次在 vue 中使用 typescript,开发环境下还算快,但是构建生产包

  • vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动 细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d

  • vue cli使用融云实现聊天功能的实例代码

    先看下vue-cli的使用 1:安装node 2:npm i vue-cli -g npm install --global vue-cli 3:vue list 可以查看模板 4:选择一个模板,初始化项目,例如vue init webpack myPro 5:cd myPro  进入项目根目录 6:npm install    安装依赖 7:npm run dev   运行项目 正文开始 公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹

  • 建立和维护大型 Vue.js 项目的 10 个最佳实践

    目录 1.使用插槽(slot)使组件更易于理解并且功能更强大 2.正确组织您的 Vuex 存储 3.使用操作(Vuex Actions)进行 API 调用和提交数据 4.使用 mapState,mapGetters,mapMutations 和 mapAction 简化代码库 5.使用 API 工厂 6.使用 $config 访问您的环境变量(在模板中特别有用) 7.遵循一个约定来写提交注释 8.始终在生产项目时冻结软件包的版本 9.显示大量数据时使用 Vue 虚拟滚动条 10.跟踪第三方程序包

  • 教你如何在IDEA 中添加 Maven 项目的 Archetype(解决添加不起作用的问题)

    教你如何在IDEA 中添加 Maven 项目的 Archetype(解决添加不起作用的问题)

    目录 前言 实现过程 新建模块 添加脚手架 前言 在 IDEA 中点击新建 Maven 模块,会发现他已经为我们罗列出来了许多的 archetype,但有些时候满足不了我们的需求.下面就来看看如何添加自己的脚手架吧. 实现过程 新建模块 在 IDEA 中新建一个模块,需要保证每个目录下都至少有一个文件,不然打包的时候那个文件夹会被忽略掉,这里使用的项目结构如下图所示: 1.创建脚手架并打包打开终端,cd 到这个模块的根目录,比如这里是 D:/Java_Study/idea_projects/sp

  • 创建Web项目的Docker镜像实例讲解

    最近做个项目,创建web项目的Docker镜像,经过一番折腾终于做出来了,这里记录下,也希望读者能少走点弯路!以下就是资料整理! 基于Java,Mongodb,Tomcat的Supplierprofile项目 禁用selinux vi etc/selinux/config SELINUX=disabled SELINUXTYPE=targeted 运行镜像 Docker run -i --privileged=true -v /home/centos:/usr/local/file -d -p

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • 详解@Vue/Cli 3 Invalid Host header 错误解决办法

    我的host设置 报错如下: 解决办法: @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

随机推荐