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]LeetCode19. 删除链表的倒数第N个节点 | Remove Nth Node From End of List
Given a linked list, remove the n-th node from the end of list and return its head. Example: Given l ...
- [Swift]LeetCode96. 不同的二叉搜索树 | Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1 ... n? Example ...
- [Swift]LeetCode218. 天际线问题 | The Skyline Problem
A city's skyline is the outer contour of the silhouette formed by all the buildings in that city whe ...
- [Swift]LeetCode285. 二叉搜索树中的中序后继节点 $ Inorder Successor in BST
Given a binary search tree and a node in it, find the in-order successor of that node in the BST. Th ...
- [Swift]LeetCode765. 情侣牵手 | Couples Holding Hands
N couples sit in 2N seats arranged in a row and want to hold hands. We want to know the minimum numb ...
- [Swift]LeetCode952. 按公因数计算最大组件大小 | Largest Component Size by Common Factor
Given a non-empty array of unique positive integers A, consider the following graph: There are A.len ...
- Python---第3方库
使用pip命令安装 pip -h 查看pip使用帮助 pip install <第3方库名> pip install -U <第3方库名> 对已安装的第三方库更新 pi ...
- Kubernetes 笔记 06 豌豆荚之旅(一)
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...
- 第二周 IP通信基础回顾
这周我们学习了OSI参考模型,了解局域网的分层为接入层,汇聚层,核心层.网络划分为通信直网,资源直网.osi模型概述在主动间数据传输为应用层,表示层,会话层:底层数据l流为传输层,网络层,数据链路层, ...
- 6.Django session
session 1.概述 cookie和session的区别 Cookie是保存在用户浏览器端的键值对,Session是保存在服务器端的键值对:Cookie做用户验证的时,敏感信息不适合放在Cooki ...