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. 非对称加密技术里面,最近出现了一种奇葩的密钥生成技术,iFace人脸密钥技术

    要说到非对称加密技术啊,得先说说对称加密技术 什么是对称加密技术 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密. 也就是密钥也可以用作解密密钥,这种方法在密码学中叫做对称 ...

  2. 巡风源码阅读与分析--querylogic函数

    文件位置:views/lib/QueryLogic.py Querylogic() # 搜索逻辑 def querylogic(list): query = {} if len(list) > ...

  3. Java破解图片防盗链

    前言 今天想下载几张好看的壁纸,然后发现了一张是自己比较喜欢的额.然后点进去看看,WOW!好多好看的壁纸呀,于是我就起了贪念.哈哈!想把他们这一组图片打包下载,小白的方法就是一张一张下载,那样对于我们 ...

  4. 干货 | Java8 新特性教程

    本教程翻译整理自 https://github.com/winterbe/java8-tutorial 本教程首发自个人网站: https://www.exception.site/java8/jav ...

  5. Java核心技术及面试指南:视频列表

    如下是本书相关内容的视频列表,会动态更新 第一章 1 视频1.1  JDK和JRE和JVM的区别,安装Java开发环境    1.1.1  第2页 2 视频1.2  编写第一个HelloWorld程序 ...

  6. java多线程(6)---ThreadLocal

    ThreadLocal 什么是ThreadLocal? 顾名思义它是local variable(线程局部变量).它的功用非常简单,就是为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可 ...

  7. 从无到有-在create-react-app基础上接入react-router、redux-saga

    搭建项目框架 新建项目 执行如下代码,用create-react-app来建立项目的基础框架,然后安装需要用到的依赖. $ npx create-react-app my-test-project $ ...

  8. Android 发送多个不同的快捷方式(shortcut)到桌面并向其启动的Activity传参

    需求: 对于创建快捷方式到桌面,网上能查到不少资料,但一般都是针对应用程序本身的. 前阵子在做项目时,遇到了一个类似于百度贴吧里面的一个需求:对于每个具体的贴吧,都可以将其发送到桌面(HomeScre ...

  9. [零] Java 语言运行原理 JVM原理浅析 入门了解简介 Java语言组成部分 javap命令使用

    Java Virtual Machine  官方介绍 Java虚拟机规范官方文档 https://docs.oracle.com/javase/specs/index.html 其中以java8的为 ...

  10. 【测试工程师面试】 记录XX银行面试

    LZ在一个18线小城市做测试,近来想走出自己的舒适区,去做一点不一样的测试工作. 18线地区,测试工作并不多.最好的差不多就是LZ目前待着的公司了.遂决定去魔都闯荡几年,对一个在魔都无房无车无户口的人 ...