vue启动项目报错,node、node-scss、scss-loader版本不兼容问题

在 vue 项目中运用sass时,在特定的场景内在运行项目时会报错 scss 文件或报错 .vue 文件中的 lang=“scss” 有问题;原因有可能是因为你电脑中的 node 版本与 node-sass 版本不匹配导致的,解决方法如下:

1.重新下载安装对应版本的node

查看node-sass版本:

node-sass 版本可在项目根目录 package.json 文件中查看

在这里插入图片描述

查看node版本可在终端中运行:

node -v 

下载安装好对应版本的 node 后,重新下载依赖再启动项目
具体node与node-sass匹配版本如下:

在这里插入图片描述

2.下载对应版本的node-sass版本

我的node版本是14.0.1,所以要下载4.14以上的版本,命令如下:

npm install node-sass@4.14.1
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你好!针对在Vue 2中使用postcss-px-to-viewport和scss的问题,你可以按照以下步骤进行设置: 1. 首先,安装必要的依赖: ```shell npm install postcss-px-to-viewport postcss-import node-sass sass-loader --save-dev ``` 2. 在项目根目录下创建postcss.config.js文件,并添加以下内容: ```javascript module.exports = { plugins: { 'postcss-import': {}, 'postcss-px-to-viewport': { viewportWidth: 750, // 视窗的宽度,对应设计稿的宽度 unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数 viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw selectorBlackList: ['.ignore'], // 指定不需要转换的类名,可以自定义 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位 mediaQuery: false, // 允许在媒体查询中转换`px` }, }, }; ``` 3. 在Vue项目的webpack配置文件(一般是vue.config.js)中,添加sass-loader的配置: ```javascript module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@/assets/scss/variables.scss";`, }, }, }, }; ``` 4. 在你的Vue组件中,可以开始使用scss和px-to-viewport了。例如: ```vue <template> <div class="my-component">Hello World</div> </template> <style lang="scss" scoped> .my-component { width: 375px; /* 在scss中使用px作为单位 */ height: 200px; @media screen and (max-width: 768px) { font-size: 16px; } } </style> ``` 这样,你就成功配置了postcss-px-to-viewport和scss,并且在Vue项目中使用了它们。使用postcss-px-to-viewport插件后,你在scss中使用的px单位将会自动转换为vw单位,以适应不同设备的屏幕尺寸。如有需要,请根据你的具体项目需求进行调整。希望对你有所帮助!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值