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没有权限无法全局更新问题【已解决】的更多相关文章

  1. node作为前台的项目如何打包静态js和css并生成版本号,loader插件的使用

    一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要 ...

  2. 63(原67).纯 CSS 创作单元素点阵 loader

    原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 如何用纯 CSS 创作单元素点阵 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...

  5. 前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此视频是可以 ...

  6. 【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效

    vue组件化应用,近期写的单个组件里有一个的渲染部分样式渲染不上去 因为同结构的其他组件均没有问题,所以排除是.vue文件结构的问题,应该是<style>内部的问题 <style l ...

  7. CSS Counter Style试玩儿

    2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...

  8. [Coding Style] CSS coding style

    CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...

  9. how to overwrite css !important style

    how to overwrite css !important style css !important bug how to override css !important style https: ...

随机推荐

  1. [Swift]LeetCode198. 打家劫舍 | House Robber

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  2. [Swift]LeetCode373. 查找和最小的K对数字 | Find K Pairs with Smallest Sums

    You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...

  3. [Swift]LeetCode397. 整数替换 | Integer Replacement

    Given a positive integer n and you can do operations as follow: If n is even, replace n with n/2. If ...

  4. [Swift]LeetCode925. 长按键入 | Long Pressed Name

    Your friend is typing his name into a keyboard.  Sometimes, when typing a character c, the key might ...

  5. kubernetes---kubectl 管理集群资源

    由于我现在的集群是把虚拟机的master文件直接拷贝过来的,所以之前的node节点是不存在的,只有k8s-ubuntu-1是新加入的,所以我要把上面之前创建的资源删除 删除deployment--&g ...

  6. linux系统安装cdcfordb2udb

    最近接触到db2数据库实时复制的解决方案InfoSphere CDC(Change Database Capture) .主要是通过读取源端的日志信息对目标端进行数据的增删改,从而尽量减少对源端资源的 ...

  7. Metrics.NET step by step

    安装Nuget包 nuget中搜索metrics,如图: 配置Metrics 在程序入口处插入配置Metrics的代码. class Program { static void Main(string ...

  8. 深度学习笔记(七)SSD 论文阅读笔记简化

    一. 算法概述 本文提出的SSD算法是一种直接预测目标类别和bounding box的多目标检测算法.与faster rcnn相比,该算法没有生成 proposal 的过程,这就极大提高了检测速度.针 ...

  9. dataframe去除null、NaN和空字符串

    去除null.NaN 去除 dataframe 中的 null . NaN 有方法 drop ,用 dataframe.na 找出带有 null. NaN 的行,用 drop 删除行: import ...

  10. Zabbix通过IPMI监控HPE服务器硬件

    IPMI是智能型平台管理接口(Intelligent Platform Management Interface)的缩写,是管理基于 Intel结构的企业系统中所使用的外围设备采用的一种工业标准,该标 ...