npm缺少css-loader,/style-compiler,stylus-loader问题,npm没有权限无法全局更新问题【已解决】
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-a5e4f82a","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"import":["~@didi/ada/style/mixins.styl","/home/xiaoju/manhattan-hera-webapp/client/style/base.styl"]}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./client/components/panel_links.vue
Cannot find module 'postcss-import'
@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-a5e4f82a","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"import":["~@didi/ada/style/mixins.styl","/home/xiaoju/manhattan-hera-webapp/client/style/base.styl"]}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./client/components/panel_links.vue 4:14-454
@ ./client/components/panel_links.vue
@ ./client/app.ts
@ multi ./client/app.ts
如下图:

在测试项目的时候,部署前端在启动前端环境的时候遇到缺少组件css-loader,/style-compiler,stylus-loader,尝试了开启外网,npm的全局安装,单独安装组件( npn install stylus-loader css-loader style-loader style-compiler --save-dev)后无果,最后在前端大神的指导下,发现是npm的目录没有权限,然后找到了破解npm无法全局安装下载的最新办法!亲测有效!
方法一:
更改npm的默认安装目录
1、为全局安装创建一个安装目录
mkdir ~/.npm-global
2、配置npm以使用新的目录路径
npm config set prefix '~/.npm-global'
3、打开或创建一个~/.profile文件并添加以下行
export PATH=~/.npm-global/bin:$PATH
4、然后全局安装npm即可
npm install
5、然后你惊奇的会发现之前全局安装不下来的东西都可以下载下来了
在success出现的那一刻,会觉得整个虚拟机都美艳不可方物~
方法二:使用节点版本管理器重新安装(高效适合高手)
1、由于npm和node.js产品由不同的实体管理,因此更新和维护可能变得复杂。此外,Node.js安装过程将npm安装在仅具有本地权限的目录中。当您尝试全局运行包时,这可能会导致权限错误。
为了解决这两个问题,许多开发人员选择使用节点版本管理器或nvm来安装npm。版本管理器将避免权限错误,并将解决更新Node.js和npm的复杂性。
此外,开发人员可以使用nvm在多个版本的npm上测试他们的应用程序。nvm使您可以轻松切换npm以及节点版本。这样可以更轻松地确保您的应用程序适用于大多数用户,即使他们使用的是其他版本的npm。如果您决定安装版本管理器,请使用您选择的版本管理器的说明来学习如何切换版本,并了解如何使用最新版本的npm保持最新。
nvm如何安装具体请参考
https://github.com/creationix/nvm/blob/master/README.md#installation
2、安装完之后验证登陆系统将提示您输入用户名,密码和电子邮件。请务必使用与在网站上输入的用户名完全相同的方式拼写您的用户名,否则您将创建一个新帐户。
npm login
3、要测试您是否已成功登录
npm whoami
4、然后尝试更新你的npm版本
npm install npm@next -g
声明:本文为博主学习感悟总结,水平有限,如果不当,欢迎指正。如果您认为还不错,欢迎转载。转载与引用请注明作者及出处。
npm缺少css-loader,/style-compiler,stylus-loader问题,npm没有权限无法全局更新问题【已解决】的更多相关文章
- node作为前台的项目如何打包静态js和css并生成版本号,loader插件的使用
一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要 ...
- 63(原67).纯 CSS 创作单元素点阵 loader
原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 如何用纯 CSS 创作单元素点阵 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...
- 前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此视频是可以 ...
- 【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效
vue组件化应用,近期写的单个组件里有一个的渲染部分样式渲染不上去 因为同结构的其他组件均没有问题,所以排除是.vue文件结构的问题,应该是<style>内部的问题 <style l ...
- CSS Counter Style试玩儿
2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...
- [Coding Style] CSS coding style
CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...
- how to overwrite css !important style
how to overwrite css !important style css !important bug how to override css !important style https: ...
随机推荐
- [Swift]LeetCode249.群组偏移字符串 $ Group Shifted Strings
Given a string, we can "shift" each of its letter to its successive letter, for example: & ...
- [Swift]LeetCode368. 最大整除子集 | Largest Divisible Subset
Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...
- [Swift]LeetCode581. 最短无序连续子数组 | Shortest Unsorted Continuous Subarray
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...
- [Swift]LeetCode970.强整数 | Powerful Integers
Given two non-negative integers x and y, an integer is powerful if it is equal to x^i + y^j for some ...
- ELK之filebeat、logstash多个topic配置
启动多个进程收集日志.直接output到kafka,output到不同的topiccat filebeat.ymlfilebeat.prospectors:- input_type: log path ...
- Mysql、Hbuilder、Idea快捷键
MyEclipse 快捷键 ↑ ↓ ← →多 1.方法抽取,Alt+Shift+M 2.多行注释:Ctrl+Shift+/ 3.对象.方法; Ctrl+2 + ↓+回车 ,自动生成返回类型和变量 (非 ...
- CentOS Ubantu linux中实用系统相关常用命令
系统信息相关命令 本节内容主要是为了方便通过远程终端维护服务器时,查看服务器上当前 系统日期和时间 / 磁盘空间占用情况 / 程序执行情况 本小结学习的终端命令基本都是查询命令,通过这些命令对系统资源 ...
- 一文掌握 Linux 性能分析之网络篇
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 这是 Linu ...
- CentOS6.5中部署java web环境
原来在linux中部署java web环境,没有做好总结,这次在部署的过程中,将部署的过程做了记录,希望对大家有帮助.主要内容包括CentOS安装以后的网络设置,系统自带jdk的卸载,新版本jdk的安 ...
- CkEditor批量上传图片(java)
CKEditor上传视频CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ 最 ...