vue安装scss出现的问题记录+解决

1:如果一直安装下去
在这里插入图片描述
在这里插入图片描述
我的出现的错误:Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined
at validateString (internal/validators.js:117:11)
at Object.join (path.js:375:7)
at getSassOptions (E:\MyVue\MyVue\node_modules_sass-loader@10.0.4@sass-loader\dist\utils.js:160:37)
at Object.loader (E:\MyVue\MyVue\node_modules_sass-loader@10.0.4@sass-loader\dist\index.js:36:49)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-7ba5bd90”,“scoped”:false,“hasInlineConfig”:false}!./node_modules/_sass-loader@10.0.4@sass-loader/dist/cjs.js?{“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-377 13:3-17:5 14:22-38
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
·解决方案:
vue安装scss时报The “path“ argument must be of type string. Received undefined
我感觉是因为版本最新的问题,需要降低版本,
这个时候我们需要两部操作就好了哦
第一步:1:package.json里面找到sass-loader”:"^10.0.1",修改版本为 “sass-loader”: “^7.3.1”
第二步:2:重新使用命令安装npm i sass-loader@7 --D
没有第三步会报Error: Cannot find module ‘node-sass’,这个时候我们再次安装就可
第三步:3:cnpm install node-sass@latest
嗯!成功了哈~~~
······························与君共勉

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在Vue项目中安装和使用SCSS,你需要按照以下步骤进行操作: 1. 在终端或命令行中使用以下命令安装SCSS依赖项: ```bash npm install sass-loader node-sass --save-dev ``` 这将安装所需的node-sasssass-loader包。 2. 打开项目中的webpack.base.conf.js文件(一般位于build文件夹内),找到rules数组,并在其中添加以下配置: ```javascript { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ``` 这将告诉Webpack在处理.scss文件时使用sass-loader、css-loader和style-loader。 3. 确保你的组件中的style标签上添加了lang="scss"属性,以指定使用SCSS语法。 ```html <style lang="scss"> /* 在这里编写你的SCSS代码 */ </style> ``` 现在你可以在Vue组件中使用SCSS了。例如,你可以在style标签中定义变量、导入外部的SCSS文件,并在其中编写SCSS样式。 请注意,这些步骤适用于使用Vue CLI创建的Vue项目。如果你使用其他工具或框架搭建的项目,可能需要稍作调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue项目中使用scss](https://blog.csdn.net/weixin_45665171/article/details/129830928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [在VUE项目中使用SCSS,从安装步骤到语法说明,带你快速入门!!](https://blog.csdn.net/jingjing217/article/details/108475413)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值