React + webpack 开发单页面应用——采坑集之 .scss模块报错

最新推荐文章于 2023-03-30 15:58:43 发布

M_ye

最新推荐文章于 2023-03-30 15:58:43 发布

阅读量438

点赞数

分类专栏：前端-react 前端-webpack

本文链接：https://blog.csdn.net/qq_41800210/article/details/90168518

版权

使用create-react-app搭建的React应用遇到.scss模块报错，错误原因是webpack配置中重复处理.scss文件规则。解决办法是检查'webpack.config.js'，删除匹配'.scss$'的规则，从而成功编译。

摘要由CSDN通过智能技术生成

背景：用脚手架 create-react-app-master 搭建项目。

大概报错如下（当时没记录）：

Module build failed: 
$red: red;
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/yangchaoguo/Documents/website/ehome/src/assets/styles/common.scss (line 1, column 1)

 @ ./src/main.js 6:0-38
 @ multi ./build/dev-client ./src/main.js

总之，当你发现自己配置的scss不能用，报样式错误的时候，可以试试我这个解决方法。

同时跪求大佬带我飞~

一个努力混迹各大社区的前端菜鸟。

解决：

As kuzzaka commented on 26 Jun 2017,this error happened because of several rules with test '.scss' was applied. Maybe your webpack.base.conf is merged with another config where there is another rule for .scss files.
So,I checked my file 'webpack.config.js' and found out this