来自util.js的Angular 6 SCSS编译错误

Question

我刚开始使用Angular 6，使用Angular CLI并熟悉文件结构。我打算使用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）。

我已降级到[email protected]

npm install --save-dev [email protected]

它适用于Angular 7.1.4，它最初使用的是[email protected]

根据发布说明，https://github.com/webpack-contrib/sass-loader/releases/tag/v7.0.0的突破性变化是：

• 删除官方节点4支持
• 这稍微改变了解析算法。不应该在正常使用中中断，但可能在复杂配置中中断。
• sass-loader现在在运行时抛出错误，如果对等依赖项错误则拒绝编译。这可能会破坏仅忽略npm的对等依赖性警告的应用程序。

对我来说这不是问题

Answer 3

Angular7 +（无法恢复sass-loader版本）和Foundation6 +＆SASS组合的解决方法：

不要在你的.scss文件的基础上使用@import util/util，而是根据你的需要分离包组合（断点，颜色，方向，弹性，数学，混合，选择，排版，单位，值），或者用./util/util欺骗它。此外foundation.scss和settings.scss在其中导入util，因此在sass-loader修复之前应该避免或修补这些文件。