import prefer js over css/sass/scss

[larpo]

It appears that 7.0 breaks sass modules we are using from npm. I guess it is related to #479

For example foundation-sites that we are using imports it's internal modules like this:

// Sass utilities
@import 'util/util';

Now, unfortunately 'util/util' is a valid file inside node_modules (from 'node-util' pkg), and the build fails with errror like this:

ERROR in ./src/style.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/style.scss)
Module build failed: 
// Copyright Joyent, Inc. and other Node contributors.
^
      Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at-rule, was "var formatRegExp = "
      in ###/webpack-sass-broken-imports/node_modules/util/util.js (line 1, column 1)
 @ ./src/style.scss 2:14-117
 @ ./src/index.js

repro repo: https://github.com/larpo/webpack-sass-broken-module-imports

Is there a way to revert to the old behaviour? I don't see any mentions on READMe about how to configure the aliasing behaviour.

[alexander-akait]

@larpo Confirm, wip

[alexander-akait]

/cc @jhnns looks like regression

[jhnns]

Yep, fix is one the way. Thanks for the test case 👍

[alexander-akait]

@jhnns can you take care?

[larpo]

Good to know it is a regression and not the intended behaviour :)

[jhnns]

Shipped as 7.0.1 🚀.

That's why reproducible test cases are so good 👍

[alexander-akait]

@jhnns looks like we still have problem 😕

[alexander-akait]

@jhnns found problem:
I have in directory two file with same name component.js and component.scss , also have app.scss with code

@import "component";

[alexander-akait]

@jhnns looks like problem here https://github.com/webpack-contrib/sass-loader/blob/master/lib/loader.js#L61, if you have two file with difference extensions, resolve prefer .js 😕

[julkue]

Hello guys,
I'm coming here since I'm also experiencing issues in this PR about updating to v7:
julkue/form-components#14 (comment)
The build fails now with an error that looks like an issue of the loader to me: https://travis-ci.org/julmot/form-components/builds/366135805#L4146

[dak]

Just confirming I'm seeing the same issue as @evilebottnawi

[alexander-akait]

@julmot @dak I have PR #558, Can you test this and confirm what is fixed your problem

[julkue]

@evilebottnawi Yes, the build passes with this branch.
@dak npm install git://github.com/webpack-contrib/sass-loader.git#fix-resolve-conflict --save-dev

[dpikt]

@evilebottnawi PR #558 fixes the issue for me as well.

[ioanungurean]

@larpo the loader works now for me too. I had errors with v7.0.0 and v7.0.1.

Use: npm install git://github.com/webpack-contrib/sass-loader.git#fix-resolve-conflict --save-dev as @julmot pointed out.

Thank you for the PR @evilebottnawi!

[julkue]

Please let us know when the PR is merged.

[ioanungurean]

What it's taking so long to be reviewed? The PR was open 10 day ago. 😢

[phahn]

This is also causing issues for me in facebook/create-react-app#3815

[sampathkumarm]

Sorry for the delayed response, I am going to test it and comment back.

[rj33]

@evilebottnawi 's fix of adding:
resolve: {
extensions: ['.scss', '.sass'],
},
Did not work for me. As long as I had node_modules in my toplevel webpack resolve list, it continued to resolve @import "base"; to
node_modules/base/index.js
Changing it to @import "_base";
was the only workaround I could find for this (basically making sure the imported name isn't the same as any node module I have installed under node_modules).

[richardkeller411]

Not spamming ( or trying not to ). I get same error with this SCSS...

@import "theme/variables";
$theme-default: #96cb57;
@import "theme/style";
@import "theme/menu";
@import "theme/responsive";

$theme-default:-dark: darken($theme-default:, 5%) !default; - Error Here ( Invalid CSS after "...e-default:-dark": expected 1 selector or at-rule, was ": darken($theme-def")

My Webpack

webpackConfig.module.rules.push({
test: /.s(a|c)ss$/,
resolve: {
extensions: [".scss", ".sass"]
},
use: [
"babel-loader",
"raw-loader",
"postcss-loader",
{
loader: "sass-loader",
options: {
includePaths: ["scss", "node_modules"]
.map(dir => path.join(__dirname, dir))
.map(gl => glob.sync(gl))
.reduce((ap, cp) => ap.concat(cp), [])
}
}
]
});

[opr]

Also experiencing this

webpack config here: https://gist.github.com/opr/adae0b0a062bfa2769be38e13ebeffd0

my files live in project_root/assets/styles/scss/style.scss and I also have the following directories: project_root/assets/styles/scss/helpers and project_root/assets/styles/scss/components - in my style.scss I do @import helpers/* however this starts trying to import files from project_root/helpers how can I stop this, changing the test parameter of my rule doesn't help

[josephecombs]

I was experiencing this exact error importing a .css file with sass-loader 7.1.0.

This is obviously a hacky solution, but I changed the file extension to .scss and things started working again.

[yisding]

@rj33 I've found adding another line to the resolve block solves the problem of it trying to import base/index.js:

resolve: {
  extensions: ['.scss', '.sass'],
  mainFiles: []
},

[alexander-akait]

Can be solved 👍 webpack/webpack#9422

[WrapTheCode]

Solved by:

1. Remove
   @import 'util/util';
   from " _settings.sass"

2. Move
   @import 'util/util';
   before
   @import 'settings/settings';
   in "foundation.scss:

3. And in my sass entrypoint:

@import '~foundation-sites/scss/foundation';
@import '~motion-ui/src/motion-ui';
@include foundation-everything;
@include motion-ui-transitions;
@include motion-ui-animations;

[JimBobSquarePants]

So what's the actual configuration solution?

[alexander-akait]

It is already fixed

[JimBobSquarePants]

It is already fixed

Odd, I saw this very same issue today using 7.3.1

[alexander-akait]

Latest version is 8.0.0 https://github.com/webpack-contrib/sass-loader/blob/master/package.json#L3

[JimBobSquarePants]

Thanks, missed that but it seems the issue is still present in 8.0.0.

[alexander-akait]

Please create new issue with reproducible test repo

[dogoku]

@JimBobSquarePants did u also update your webpack to 4.36.0 or later and your node to 8.9 or later?

[JimBobSquarePants]

@dogoku Yeah everything is up to date.
@evilebottnawi Will do, I'll add a full reproducible sample.

[sandermarechal]

I have the same issue on 7.3.1. Is version 7 no longer supported now 8 is out? Lots of projects still depend on 7 (e.g. Symfony Encore Webpack)

[samayo]

same issue

[alexander-akait]

Issue was solved, please update your deps, if you still have problem please open issue with minimum reproducible test repo

[derWebdesigner]

@evilebottnawi But only in v8 right? Like @sandermarechal pointed out, the new version of sass-loader is unfortunately not supported yet by many different projects like Symfony Encore Webpack.

[alexander-akait]

@derWebdesigner yes, only new version fix problem, i strongly recommend update sass-loader

[derWebdesigner]

@evilebottnawi Thank you for your feedback. I would love to update, but then it's not working anymore with Symfony Encore Webpack. I guess I have to open a ticket there that v8 should be supported as soon as it's possible for them.

[yoonwaiyan]

Is it possible to fix this for v7 as well as a minor release? As others mentioned there are many packages still depend on v7.