webpack5打包报错：CssSyntaxError(1:1) xxx Unknown word import api from xxx ； import content from xxx

目录

一、问题

二、错误原因及解决方法

三、总结

四、回复问题

---

一、问题

1.错误：使用webpack5打包scss文件时，报错：

   CssSyntaxError(1:1)   xxx Unknown word  import api from  xxx  ; import content from  xxx 

2.详细错误：

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(1:1) F:\reactLearning2\animation\src\css\index.scss Unknown word

> 1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    | ^
  2 |             import content from "!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/sass-loader/dist/cjs.js!./index.scss";
  3 | 
 @ ./src/css/index.scss 2:12-248 9:17-24 13:15-29
 @ ./src/js/main.js 8:0-27

webpack 5.24.3 compiled with 1 error in 26751 ms

二、错误原因及解决方法

1.错误原因：我配置了如下规则处理 scss 文件

         {
              test: /.scss$/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    'sass-loader'
                ]
            },

   可能是webpack5已经可以自动打包scss文件了或者webpack5内部的配置与我的配置冲突。

   其实我也不太确定，但是解决方法不得不让我这么想。

2.解决方法:在webpack配置文件中将上述配置删除即可

  重新打包没有报错

三、总结

1.上述错误出现的原因我也不太清楚。

2.解决方法是看了其他人使用scss文件出问题时，大部分是删除了配置就可以，所以我也试了一下，没想到竟然可以。之前想了好多办法都不行，迁移能力也很重要。

3.我测试了 css和less文件,写了配置也能正常打包;只有scss写了配置后打包时报了这个错误。

希望对你有帮助！

如有错误，欢迎指正，谢谢！

四、回复问题

1. 星月I随心提到的问题：test后面的正则表达式需要加 反斜杠。 

   有些情况是不需要转义的。

图 4-1