vue-cli 中使用scss 及 Cannot find module node-sass

最新推荐文章于 2022-11-13 18:52:15 发布
原创 最新推荐文章于 2022-11-13 18:52:15 发布 · 338 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了如何在项目中配置Sass预处理器和Webpack加载器。通过安装必要的npm包如sass-loader和node-sass，以及在webpack.base.conf.js中添加对应的规则，可以实现在项目中使用Sass语法编写CSS。当遇到找不到node-sass模块的问题时，提供了更新node-sass到最新版本的解决方案。
  • 安装模块
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
  • 文件夹build的webpack.base.conf.js中的rules 添加
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

然后就可以在项目中使用了

如果项目中报错： Cannot find module 'node-sass'
在这里插入图片描述
在终端 运行 cnpm install node-sass@latest

然后就ok了

解决vue-cli安装Vuetify报错：Error: Cannot find module 'node-sass'和Failed at the node-sass@4.14.1 postinstal
"✧treasure mountain✧"
05-05 6035
问题描述 在使用vue-cli构建的项目里安装Vuetify的时候 启动失败 报了这么一个错误： Error: Cannot find module 'node-sass' 后来自己尝试在项目里安装了node-sass 然而： Failed at the node-sass@4.14.1 postinstall script. 依旧报错 原因 Vuetify需要用到node-sass模块 然...
Vue的排坑（一）| cannot find module "node-sassmodule"
黄飞翔的博客
03-17 1510
最近开始进军uniapp，拿到了一个较为成熟的框架打算开始大展身手，结果一开始编译就出错，排除了大部分低级错误后发现跑起来的时候一直在报错“cannot find module 'node-sass'”。以为直接`npm install` 一下就能解决，结果各种install都还是一直在报错。
VUE项目运行起来报错Error: cannot find module 'node-sass'
why__的博客
05-07 1845
VUE项目运行起来报错Error: cannot find module ‘node-sass’ 项目运行起来后，输入地址，无法正常访问页面，查看命令行有报错 cannot find module ‘node-sass’ 错误表示找不到node-sass模块。 输入命令：cnpm install node-sass@latest 安装完成后，问题就解决了 ...
Vue执行npm run serve报错Error: Cannot find module ‘@vue\cli-service\bin\vue-cli-service.js‘
q990453297的博客
04-08 6837
详细报错如下 1.第一种情况：目录下没有node_modules，也就是没有安装依赖包，解决方法：先执行 npm i 再执行 npm run serve 2.第二种情况：这也是我遇到的情况 不仅需要包文件夹的文件名不能有中文，它的上层文件夹名也不能有中文。可以直接把包文件放桌面上执行试一下。 ...
scss中引入字体找不到的问题
LJJ_3的博客
12-03 798
scss中引入字体找不到的问题 在项目中引入一个字体文件，路径写法都没错，但是就是找不到这个文件 最终解决：使用~@即可
Error: Cannot find module 'webpack-cli'
芳草萋萋鹦鹉洲哦
12-01 1503
错误如下图： 解决方法：npm install webpack-cli -g
Error: Cannot find module 'webpack-cli’
幽幽小春
12-24 5129
error + webpack-cli@3.1.2 updated 1 package in 4.777s { Error: Cannot find module 'webpack-cli' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15) at Function.Module._...
error in ./src/pageB/pages/doubleEleven/accident.vue?vue&type=style&index=0&id=3cf11f67&lang=scss&scoped=true& Error: Cannot find module 'node-sass' Require stack: - D:\XinDW-cloud\uni-wapNew-home\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\getDefaultSassImplementation.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\getSassImplementation.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\index.js- D:\XinDW-cloud\uni-wapNew-home\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\cjs.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\loader-runner\lib\loadLoader.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\loader-runner\lib\LoaderRunner.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\webpack\lib\NormalModule.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\webpack\lib\NormalModuleFactory.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\webpack\lib\Compiler.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\webpack\lib\webpack.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\@dcloudio\uni-cli-shared\lib\util.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\@dcloudio\vue-cli-plugin-hbuilderx\index.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\@vue\cli-service\lib\Service.js - D:\XinDW-cloud\uni-wapNew-home\node_modules\@vue\cli-service\bin\vue-cli-service.js @ ./src/pageB/pages/doubleEleven/accident.vue?vue&type=style&index=0&id=3cf11f67&lang=scss&scoped=true& 1:0-991 1:1007-1010 1:1012-2000 1:1012-2000 @ ./src/pageB/pages/doubleEleven/accident.vue @ ./src/main.js?{"page":"pageB%2Fpages%2FdoubleEleven%2Faccident"} ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! qyptnew@0.1.0 dev:mp-weixin: `cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the qyptnew@0.1.0 dev:mp-weixin script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2025-11-07T09_28_13_569Z-debug.log
最新发布
11-08
根据用户的问题描述，编译Vue项目时出现"Cannot find module 'node-sass'"错误，导致npm构建失败。该错误通常是由于缺少node-sass模块或安装不正确引起的。根据引用内容，解决方案主要通过淘宝镜像来安装node-sass...
Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): Error: Cannot find module 'D:\43周凡\HBuilderX\plugins\compile-dart-sass\node_modules\sass'
09-18
您遇到的错误 `Cannot find module 'D:\43周凡\HBuilderX\plugins\compile-dart-sass\node_modules\sass'` 通常是由于 HBuilderX 的 `compile-dart-sass` 插件中 Sass 依赖缺失或路径配置错误导致的。常见原因包括：...
ERROR Failed to compile with 1 error 12:25:19 error in ./src/assets/css/element-variables.scss Syntax Error: Error: Cannot find module 'node-sass'
04-14
在Vue项目中，比如如果使用Vue CLI创建的项目，可能需要检查vue.config.js中的配置，确保sass-loader的版本正确。React项目的话，可能需要检查webpack.config.js中的相关loader配置。比如引用[3]和[4]提到的webpack...
webpack cannot find module webpack-cli
彻底拆分，一切可控！
02-19 886
1.安装过程 npm install webpack -g npm install webpack-cli -g 2.使用webpack打包 webpack runoob1.js bundle.js 报错： cannot find module webpack-cli 3.解决办法：2个包一起安装 3.1.移除安装的包 npm rm -g webpack-cli npm rm -g w...
Cannot find module webpack-cli
悟世君子的博客
12-13 845
webpack 4+ 版本，还需要安装 CLI 报错： Cannot  find  module  webpack-cli 解决：使用全局安装命令    npm install webpack-cli -g  
reac之Error: Cannot find module 'webpack-cli'
weixin_40200876的博客
07-27 453
Error: Cannot find module 'webpack-cli'解决办法： 全局安装，终端输入： npm install webpack-cli -g 如果有权限限制加上sudo： sudo npm install webpack-cli -g
【问题解决】Error: Cannot find module ‘webpack-cli‘
思南的博客
02-23 1438
问题阐述 当安装vue项目的时候，需要依赖于webpack进行项目打包，此时需要安装webpack-cli模块，在安装过程中，可能出现错误提示Error: Cannot find module ‘webpack-cli’，如下图所示 解决方案 利用npm安装webpack-cli时选择全局安装 npm install webpack-cli -g 成功解决过后，将出现以下提示 ...
webpack -v报错：Cannot find module ‘webpack-cli/package.json‘
mashirokayo的博客
11-13 1万+
webpack -v报错：Cannot find module 'webpack-cli/package.json'
webpack编译遇到的问题：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
以爱护甲,爱满枫林。
11-06 423
运行npm run dev遇到的问题：Error: Cannot find module ‘webpack-cli/bin/config-yargs’ // 当前package.json 文件 ​ "devDependencies": { "webpack": "^5.2.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0" } 问题解决参考： Error: Cannot find module ‘webpack-
taro 使用taro-ui时报错，Cannot find module ‘./style/index.scss‘
PrimaryColor
05-18 2426
taro-ui官网： Taro UI | O2Team 出现这个问题，说明你安装taro-ui时是按照官网的步骤，然后引入文件就出现这个报错了。之所以会报错，因为taro和taro-ui的版本不兼容。 解决方法： 重新安装taro的alpha版本，安装完成如果还是报错，就重启项目。如果还是还是不行，删除依赖重新cnpm i。 cnpm install taro-ui@3.0.0-alpha.1 -S ...
Error: Cannot find module 'webpack-cli'--解决方案
热门推荐
clf_programing
05-25 5万+
原因： 得要全局安装解决方案： npm install webpack-cli -g
如何解决---Error: Cannot find module 'webpack-cli'；
weixin_41813970的博客
01-22 2519
在进行初步的webpack配置后，通过webpack --process --colors打包项目，结果报出如下错误：（提示安装webpack-cli） 但是按照提示安装webpack-cli又报出如下的错误：（安装失败，找不到module "webpack-cli"） 经过查阅资料，发现 webpack-cli需要全局安装 即可解决上述问题 即 npm install -g webpa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值