9

In my nodeJS project suddenly it give error.I do not any upgrade or changes. When I write NPM start in command line it give that error

 ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?
sourceMap&outputStyle=expanded&includePaths[]=c:/TFS/rc1/app/scss&includePaths[]

=c:/TFS/rc1/~/compass-mixins/lib&sourceMap&sourceMapContents=true!./app/scss/_toolkit.scss
    Module build failed:
    undefined
     ^
          Functions may not be defined within control directives or other mixins.
          in c:\TFS\rc1\node_modules\compass-mixins\lib\compass\functions\_lists.scss (line 81, column 3)
     @ ./app/scss/_toolkit.scss 4:14-337

I reinstall compass-mixins package but it still give same error.Then I looked _lists.scss that file in 81 line there is a code .I deleted that bu it give same error.What should I do?

@if not(function-exists(compact)) {
  @function compact($vars...) {
    $list: ();
    @each $var in $vars {
        @if $var {
            $list: append($list, $var, comma);
        }
    }
    @return $list;
  }
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171
user1688401
  • 1,851
  • 8
  • 47
  • 83
  • Are you using LibSass or the official Ruby Sass? – cimmanon Apr 21 '16 at 17:39
  • this is react js project not ruby project.How can i check if it is libsass or ruby sass? – user1688401 Apr 21 '16 at 17:47
  • 1
    I'm not familiar with any of that other stuff you're using, but for Unix or Mac OS, running `sass -v` in the terminal would at least confirm that you have Ruby Sass installed. – cimmanon Apr 21 '16 at 17:52
  • @cimmanon I use windows 8.I try sass -v it is not work.You advise mi to check if sass is install? – user1688401 Apr 21 '16 at 18:00
  • Unfortunately, I don't use Windows for development (I use a unix virtual machine inside of a Windows host). I ran the provided code using both Ruby Sass and LibSass, and I only get the error in the Ruby Sass version... so I am a little confused as to why you would use the compass-mixins library instead of just using Compass (they're not the same thing) if you're using Ruby Sass. – cimmanon Apr 21 '16 at 18:20
  • @cimmanon this problem is happening to me too, I got Sass 3.4.19 installed – QoP Apr 21 '16 at 18:41
  • @QoP are you use windows?What is cmd command for install sas 3.4.19? – user1688401 Apr 21 '16 at 18:49
  • I think that you have to install Ruby first, then gem install sass – QoP Apr 21 '16 at 18:51

5 Answers5

6

I also face the similar problem. And my project is using gulp-sass and compass-mixins. As heart.cooks.mind points out that, gulp-sass is depending on node-sass. And node-sass upgrade one of its dependence libsass to version libsass 3.3.3 Delorean since node-sass 3.5.1.

However, one of libsass 3.3.3 Delorean changes is related to this problem:
'Disallow functions to be defined in control directives or mixins (@mgreter, #1550)'

Obviously, _lists.scss in compass-mixins break this rule. Seems someone raise an issue to compass-mixins and they have idea on fixing it.

Before compass-mixins release the issue fixed version, my temporary workaround is to delete node_modules/node-sass manually and npm install node-sass@3.4.2

Vincent Pang
  • 422
  • 4
  • 8
  • For those with automated builds, this isn't really an option. Adding `"node-sass": "3.4.2"` to `devDependencies` in `package.json` is a better call here. When the breaking change is solved, just removed that line and you're good to go. – GFoley83 May 05 '16 at 03:06
2

I had the same issue,please refer to node sass release 3.5.3 is breaking build and force lock gulp-sass to use the specific node sass library using shrinkwrap and avoid using the buggy version of node sass

Community
  • 1
  • 1
Sudipto Sarkar
  • 346
  • 2
  • 11
1

I am using Gulp. Version 2.3.0 of gulp-sass breaks it. Go back to Version 2.2.0 and you are all fixed.

Edit:

The real culprit is the node module inside the "gulp-sass" node module known as "node-sass". You can see inside "gulp-sass"'s package.json file that it simply pulling version greater than ^3.5.3.

Even if you go back and reinstall "gulp-sass" to 2.2.0, as I suggested earlier, the package.json file in there will still pull "node-sass" greater than ^3.5.3.

If I use the older version of "node-sass" 3.4.2 that error goes away. I don't know how to fix that in an automated way. In a pinch I was able to fix the problem by copying that folder (that is using 3.4.2) from a different project that works. Now it compiles.

Can someone smarter than me figure out a better way to accomplish this result?

heart.cooks.mind
  • 1,065
  • 1
  • 9
  • 22
  • can you give command please.I am .net developer i am new at the node js -npg envirmont – user1688401 Apr 21 '16 at 20:22
  • Can you clarify how this solves the problem? Simply getting rid the error message won't help if the function ends up being scoped inside that if-statement. – cimmanon Apr 21 '16 at 23:10
  • Correct. It does not "solve" the problem. This is an inherent risk of using Node modules. Every node module (not just gulp-sass) has its own package.json file. That will always be pulling greater than ^x.x.x. In the long run its always a bad idea to fork code that is maintained elsewhere. It does "solve" the problem for us today, which is important. But the root problem is an inherent risk of using Node (for our purposes) due to the lack of control over child child dependencies. – heart.cooks.mind Apr 22 '16 at 14:05
  • Also I want to point our that using that specific version of "node-sass" is not the root root problem. It is actually the compass-mixin that it is calling. Apparently Libsass is getting more strict at what it allows. Hence the error message "Functions can not be defined within control directives or other mixins". They used to let this stuff slide, but now they are not. – heart.cooks.mind Apr 22 '16 at 14:10
  • I added `"node-sass": "3.4.2"` to `devDependencies` in my `package.json` file (even though I don't specifically need it, `grunt-sass` does) which stops `grunt-sass` from installing `node-sass` and that seems to solve the issue. – GFoley83 May 05 '16 at 03:03
  • 1
    Sorry - actually adding `"node-sass": "3.4.2"` does work. But be careful not to carelessly just type `"^3.4.2"` as I first did. 'Cos that doesn't work. – thund May 17 '16 at 06:26
  • I never use `^` or `~` for that very reason. If you work in an environment with automated builds or multiple devs. It pays to be 100% sure everyone is using the same dependencies. Learned that the hard way. – GFoley83 Jun 09 '16 at 05:41
1

What I (temporarily) did, was to install globally the node-sass v3.4.2, and then replace the gulp-sass version of node-sass (it is located within gulp-sass/node_modules) with this older one.

sudo npm install -g node-sass@3.4.2;
sudo cp -r /usr/lib/node_modules/node-sass/ /usr/lib/node_modules/gulp-sass/node_modules/;
Vagelis Prokopiou
  • 2,285
  • 19
  • 14
1

Btw, there is a PR waiting to be merged for this. But if you want to use this today then there's a fork of the merge too.
If you want to use latter then just put compass-mixins: tjenkinson/compass-mixins in your package.json and all will be good.

Update:- There's also an npm package for the latter mentioned in the PR now

Update 2:- This should no longer be a problem with v0.12.8 now

shriek
  • 5,605
  • 8
  • 46
  • 75