webpack编译scss语法报错的原因

最新推荐文章于 2024-07-17 23:23:47 发布
最新推荐文章于 2024-07-17 23:23:47 发布
阅读量1k 收藏 2
点赞数
分类专栏： 报错笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/luo1914_/article/details/106167262
版权
博客介绍了在webpack中遇到.scss文件编译错误的状况，解析错误原因为webpack不识别.scss后缀。解决方法包括安装node-sass和sass-loader，并在webpack配置文件中进行相应设置，完成配置后重新运行即可正常编译。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先来一张报错的截图
在这里插入图片描述
报错的原因：就是webpack没有办法识别.scss后缀名的文件
所以我们要按照node-sass和sass-loader

yarn add node-sass sass-loader -D

然后在webpack.config.js配置

 module: {
   
        rules: [
          {
   
            test: /\.css$/i,//指明需要匹配什么样的文件类型
最低0.47元/天 解锁文章
scss 编译报错：Module build failed:Unknown word
zwkkkk1的博客
09-19 5483
首先，请确认错误不是由语法错误造成的。 在排除语法错误后，这一问题产生的原因很有可能是 webpack 的 loader 顺序设置错误。 解决方案 首先要确认下面的扩展有没有安装好 npm i sass-loader node-sass postcss-loader autoprefixer css loader 的配置 生产环境 { test: /\.css$/, use: Ext...
Webpack配置编译SCSS
justforuse的博客
03-08 8574
原文地址： https://justforuse.github.io/blog/2019/03/webpack-compile-scss/ 现在框架都提供了一套完整的编译配置，比如Vue; 有时只是需要编译scss文件，在使用gulp的方式时遇到了无法识别SCSS的~语法的问题，其实也可以通过一些配置来解决，只是觉得既然webpack是主流，那不妨总结一套专门编译scss的配置 webpack.c...
vue-cli以webpack-simple+elementui配置
runOnWay的博客
01-10 1123
vue开发中，使用vue-cli脚手架快速搭建框架，之后引入elementui进行开发，在按照官网指示引入elementui后，会报错，关于font的错误。 此时需要在webpack.config.js中更改相关配置。 在rules中加入以下代码 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-
webpack 编译sass异常
伟大的路人 的博客
11-03 2256
现在前端大部分没有直接编辑css样式，而是通过使用第三方提供的编辑，提高开发效率，如sass与less，为了便捷会引入postcss来帮编译的样式自行加入相应的细节兼容浏览器，如下所示：{ display: flex }编译为{ display: webkit-box; display: webkit-flex; display: ms-flexbox; displa
webpack安装scss报错
文龙刚的博客
01-22 476
很多可能是因为版本问题，现在安装一个通用版，包治百病： npm uninstall sass-loader npm uninstall node-sass -D npm install sass-loader@7.3.1 --save-dev npm install node-sass@4.14.1 --save-dev 再执行你的打包命令：npm run dev OK 玩去咯！！！ ...
使用webpack打包发现css单行注释报错
小鱼尔呀
05-08 1637
手动创建了webpack项目，并引入了less,感觉一切正常，可是打包时发现居然报错： 解决办法 ： postcss.config.js文件中新增 parser:'postcss-scss'
报错：webpack@3.6.0版本与css-loader不兼容问题
weixin_51375107的博客
10-19 1560
webpack3.6.0与其他loader不兼容如何解决? 再次提供一套兼容版本 只需要把下面版本号复制到package.json中，然后直接使用指令：npm install即可。 不要一个一个去安装。 "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "css-loader": "^3.0.0", .
【Webpack】样式处理 - 样式预处理
loyd3的博客
05-27 601
样式预处理是在开发中会使用一些样式预编译语言，如scss,less等，在项目打包过程中再将这些语言转换为css，借助这些语言强大和便捷的特性，可以降低项目的开发和维护成本。下面是目前最主流的两种预编译语言是如何配置的。
在vue2中，在组件a中引入a.scss文件，项目编译报错，显示a.scss文件找不到其它文件，在组件b中引入a.scss不报错
最新发布
03-12
如果没有指定lang属性，编译器会当作普通CSS处理，从而无法解析SCSS语法，导致嵌套或其他高级特性报错。 然后，考虑版本问题。引用[^4]指出sass-loader版本过高可能导致构建错误，建议降级到7.3.1。用户可能安装了...
scss 使用$ 定义变量的时候报错
KLW75
09-07 1503
使用scss可以定义变量。如果在定义变量的时候报错 请检查style标签是不是没有声明lang <style lang="scss"> </style> 添加上lang以后就不会报错了。
当 SCSS 编译出现错误时，有哪些常见的排查和解决方法？
xy520521的博客
07-17 700
检查拼写错误：检查代码中是否存在拼写错误，比如拼写错误的变量名或混合器名。检查错误提示：查看错误提示信息，并仔细阅读错误消息，以了解错误的原因。检查混合器使用：确保混合器的参数正确传递，并且混合器已经定义。检查变量定义：检查变量是否定义正确，并且在使用前已经定义。检查注释使用：注释可能导致编译错误，检查注释是否正确闭合。检查函数使用：确保函数的参数正确传递，并且函数已经定义。
scss :export 中导出的变量与Vue JavaScript共享无效
小兰蜀黍—蓝已青矣
05-31 5161
scss :export 中导出的变量与Vue JavaScript共享无效
项目中scss编译报错解决方案
weixin_42219561的博客
12-14 671
项目中scss编译报错解决方案(使用dart-sass替换scss模块) npm install node-sass@npm:dart-sass
scss解析/deep/以及＞＞＞深度选择器报错
only_neo的博客
07-30 4324
若存在::v-deep未生效的情况，确认使用的文件是否为组件级，若为组件级，改为在调用该组件的页面设置::v-deep即可。但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.如果vue的style使用的是css，那么则。此时我们可以使用第三种方式。
SASS编译失败
weixin_30364147的博客
08-16 325
文件名不能用中文 转载于:https://www.cnblogs.com/qq309240790/p/5775515.html
安装scss/sass后报错全过程及具体指令
PJ码匠人
11-25 1302
场景描述 最近在使用uni-app开发小程序时，因为引入了第三方组件使用了sass，HBuilder默认没有安装‘scss/sass’插件，导致编译报错，于是用IDE安装了一下，但是接着运行小程序又出现了如下错误： 11:07:06.103 Module build failed (from ./node_modules/sass-loader/lib/loader.js): 11:07:06....
webpack5
世界，太精彩
06-15 219
一、多个入口，多个出口配置 string类型：单个入口，打包一个chunk，输出一个bundle，chunk的名称是默认。 entry: './src/index.js' 数组类型: 多个入口，一个chunk，一个bundle，chunk的名称默认。 entry: [‘./src/index.js’, './src/main.js'] obj类型：多个入口，多个chunk，多个bundle, chunk的名称是key。 entry: { 'one': './src/index.js', 'two':
webpack打包sass失败
m0_47195133的博客
05-17 502
webpack打包sass失败
解决用webstorm打开taro小程序项目，无法识别alias @的问题
Dong__Ni的博客
09-09 1420
taro项目根目录新建webstorm.config.js,进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可。 /** * 由于 taro 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名 * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用 * 进入 WebStorm preferences -> Language
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值