如果存在同名的其他类型文件，Sass-loader 无法正确解析导入

Posted 2023-02-22

【中文标题】如果存在同名的其他类型文件，Sass-loader 无法正确解析导入

【英文标题】：Sass-loader not resolving import correctly if other type file exists with same name

【发布时间】：2019-01-11 09:43:13

【问题描述】：

我正在使用带有 angular 5 的 webpack 4 并使用 sass-loader 将 scss 文件转换为 css。 我有一个 scss 文件（例如 main.scss），它导入另一个 scss 文件，例如 foo.scss，如下所示：

@import "foo";

我也有 foo.ts 文件

sass 加载程序在解析来自 main.scss 的导入时尝试读取 foo.ts 而不是 foo.scss 时出错。

如果我将唯一名称分配给 foo.scss 文件，它将正常工作。

以上是我面临的问题的本质，但更具体的细节是：

我的 webpack.config 文件的相关部分是：

      test: /\.scss$/,
      exclude: /(boot\.scss$|node_modules$)/,
      use: [
              loader: 'to-string-loader'
          ,
          
              loader: 'css-loader'
          ,
          
              loader: 'postcss-loader',
              options: 
                  plugins: function() 
                      return [autoprefixer];
                  ,
              ,
          ,
          
              loader: 'sass-loader',
              options: 
                  includePaths:[path to relevant folder],
              ,
          ,
      ],
  

相关的 npm 包及其版本。

sass-loader@7.0.1 webpack@4.8.3

我得到的错误是：

./app/components/alerts/alertlist.component.scss 中的错误 (./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!. /app/components/alerts/alertlist.component.scss) 模块构建失败：导入 Directive、ElementRef、OnInit、 AfterViewInit 来自 '@angular/core'; ^ 属性“指令”必须后跟一个“：” 在 /应用程序路径/foo/test-app-animation.ts（第 1 行，第 10 列）@ ./app/components/alerts/alertlist.component.scss 2:21-215 @ ./app/components/alerts/alertlist.component.ts @ ./app/components/alerts/module.ts @ ./app/components/module.ts @ ./app/app.module.ts @ ./app/index.ts

我在“/应用程序路径/foo/”路径中有两个文件

/test-app-animation.ts /test-app-animation.scss

重命名其中一个可以解决问题。

【参考方案1】：

您应该在导入语句中指定文件扩展名，例如 import("foo.scss")，或者为您的样式使用唯一名称 (foo.styles.scss)，然后将其导入 import("foo.styles")。

重点是，根据webpack docs，您可以跳过在resolve.extensions 数组中指定的扩展。

module.exports = 
  //...
  resolve: 
    extensions: [/* array of extension that are resolved as modules */]
  
;

但是如果 webpack 找到了一个合适的带有某些扩展名的模块，它不会检查带有其余扩展名的文件是否存在。

【讨论】：

我有 resolve.extensions = ['.ts', '.js', '.json'],

当 sass-loader 尝试从 scss 文件解析 @import 语句时触发问题。这让我认为这个问题与通过 sass-loader 解析导入路径有关。如果我错了，请纠正我。 PS 相同的解析扩展和相同的代码正在使用 webpack 3。