Question

我只是使用Angular CLI从Angular 6开始，并且熟悉文件结构。我打算使用SCSS来创建一个单一的全局样式表。但是，当我编译时，我收到错误消息：

ERROR in ./src/app/top-bar/top-bar.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

// Copyright Joyent, Inc. and other Node contributors.
^
Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at- 
rule, was "var formatRegExp = "
in /Users/me/Documents/projects/node_modules/util/util.js 
(line 1, column 1)

我的自定义scss文件夹位于src/assets/scss下。

我的顶栏组件位于src/app/top-bar下。

我正在尝试访问src/assets/scss/app.scss中的src/app/top-bar/top-bar.component.scss并收到上述错误。

我尝试了多种方法来导入文件@import "~/assets/scss/app.scss";和@import "../assets/scss/app.scss";以包括必要的变量，但由于该错误似乎含糊且未指出，因此我无法确定自己在做什么错除了核心的角度工具外，任何其他特定文件。

即使有人在调试过程中发现此类错误，也可以帮助我们。

Answer 1

我遇到了同样的问题。根本原因是webpack使用的SCSS文件加载器/解析器中的错误（由@ angular / cli使用），该错误会加载除SCSS文件之外的JS文件。

错误是JS文件优先于SCSS文件。 GitHub问题在这里：

https://github.com/webpack-contrib/sass-loader/issues/556

坏消息是该问题已经开放了8个月，并且没有接受修复此问题的请求。

好消息是，您可以通过使用与node_modules子目录中的JS文件名不匹配的SCSS文件名来解决此问题。

例如，我有一个名为_util.scss的SCSS文件，因此我的错误是：

  Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at-rule, was "var formatRegExp = "      
     in C:\src\project\node_modules\util\util.js (line 1, column 1)

我的解决方法是将SCSS文件重命名为_sass-util.scss。希望有帮助。

Answer 2

如@crimbo所指出的，问题出在https://github.com/webpack-contrib/sass-loader/issues/556中，但是我无法重命名文件，因为我使用的是第三方库（ Foundation 6 ）。

我已降级为 sass-loader@6.0.7

lambda

它对我来说适用于 Angular 7.1.4 ，它最初使用了 sass-loader@7.1.0

根据发行说明https://github.com/webpack-contrib/sass-loader/releases/tag/v7.0.0，重大更改是：

放弃官方节点4支持
这会稍微改变解析算法。不应破坏正常使用，但可能会破坏复杂的配置。
sass-loader现在在运行时引发错误，如果对等依赖关系错误，则拒绝编译。这可能会破坏仅忽略npm的对等相关性警告的应用程序。

这对我来说不是问题

Answer 3

Angular7 +（无法还原sass-loader版本），Foundation6 +和SASS组合的解决方法：

不要{.1s}从.scss文件中的基础开始，而是根据您的需要或技巧，将软件包组合（断点，颜色，方向，伸缩，数学，混合，选择器，版式，单位，值）分开@import util/util。另外，./util/util和foundation.scss会在其中导入util，因此应避免使用此文件或在本地修补此文件，直到修复sass-loader为止。

util.js中的Angular 6 SCSS编译错误

3 个答案: