Sass-loader not resolving import correctly if other type file exists with same name

Question

I am using webpack 4 with angular 5 and using sass-loader to convert scss files to css. I have a scss file (eg main.scss) which imports another scss file eg foo.scss like this:

@import "foo";

and i also have foo.ts file

sass loader is giving error as it tries to read foo.ts instead of foo.scss while resolving imports from main.scss.

If I assign the unique name to foo.scss file, it will work fine.

Above is the essence of the issue of I am facing, but to be more specific here are details:

The relevant part of my webpack.config file is:

{
      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],
              },
          },
      ],
  }

Related npm packages with their versions.

[email protected] [email protected]

And Error I am getting is:

ERROR in ./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) Module build failed: import { Directive, ElementRef, OnInit, AfterViewInit } from '@angular/core'; ^ Property "Directive" must be followed by a ':' in /{path to app}/foo/test-app-animation.ts (line 1, column 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

I have two files in "/{path to app}/foo/" path

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

Renaming either of one resolves issue.

Taras Polovyi Taras Polovyi · Accepted Answer · 2018-08-03T14:49:13

You should either specify file extension in your import statement like import("foo.scss"), or use unique name for your styles (foo.styles.scss) and then import it import("foo.styles").

The point is that, according to webpack docs, you can skip the an extension that is specified in resolve.extensions array.

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

But if webpack finds a suitable module with some extension, it doesn't check the existence of the files with the rest of extensions.

Sass-loader not resolving import correctly if other type file exists with same name

1 Answers