materialize compass watch shows error on default - compass

I am using ruby 2.1.2 ,Compass 1.0.1, Sass 3.4.21 (Selective Steve).
While my config.rb file contains
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
I haven't changed the default file that i downloaded from materialize css. compass watch generates the following errors
error sass/materialize.scss
(/usr/lib/ruby/vendor_ruby/sass/selector/abstract_sequence.rb:96:in `block in _specificity': undefined method `specificity' for [:not(.btn)]:Array)
What am I missing here?

If anyone's running with the same problem.
There was problem in the latest version of Sass by removing and installing the 3.4.16 version the problem was fixed.

Related

Compiler issue with npm React package-lock.json "autoprefixer" version 9.8.1

Just installed React npx create-react-app client and it failed to compile when launched citing the error ...autoprefixer/node_modules/kleur' do not define a valid './colors' target. I re-installed, it launched, but it failed again when launched concurrently with the express server.
Digging further... Kleur (version 4.0.1) is a dependency for "autoprefixer" in the package-lock.json file (version 9.8.1). I noticed that yarn.lock is referencing kleur version 3.0.3, though version 4.0.1 was installed in node_modules. A few days earlier, I had installed a React client where "autoprefixer" (version 9.8.0) used "chalk" with no "kleur" dependency, and which had no problems starting up.
Though not really understanding the problem, I replaced the "autoprefixer" code snippet (v. 9.8.1) in the newly installed client package-lock.json file with the previously installed version (9.8.0) and it appears to have solved the compiler issue. Curiously, references to kleur#^4.0.1 in node_modules seemed to switch to kleur#^3.0.3 after I made the change, which I cannot explain.
Thoughts anyone?
After lots of investigation, I found the problem. The problem was in the autoprefixer.js file which is part of dependencies in node_modules. As I understood system couldn't find the address of Kleur module. Just go to this file in the following path:
node_modules > autoprefixer > lib > autoprefixer.js
in this file change the value of kleur variable from :
var kleur = require('kleur/colors');
to
var kleur = require('../node_modules/kleur/colors');
I found this by comparing the address of this module with other modules in same file. if you hover your mouse on other modules like postcss you can see it has a complete address but this module kleur doesn't have such an address so when I changed the address to new value now it shows full address like other modules and it worked for me.

Functions may not be defined within control directives or other mixins

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;
}
}
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
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
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?
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/;
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

How can I get WebStorm to show me a list of bower packages?

Good morning.
My setup:
OSX El Capitan 10.11.2
JetBrains WebStorm 11.0.2
Node.js 4.2.3
NPM version 2.14.7
Bower 1.7.0
Npm's prefix to~/.npm-global
My executable path is set: $PATH = /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/mike/.npm-global/bin
Running bower search [package] --json from the command line does return results.
The relevant lines (when Webstorm runs the search) from my log look like:
2015-12-10 10:11:20,252 [1087432] INFO - ipt.bower.BowerCommandLineUtil - Running bower command: /usr/local/bin/node /Users/mike/.npm-global/bin/bower search --json
2015-12-10 10:11:20,739 [1087919] WARN - .BowerAvailablePackagesManager - [parse all bower packages] Top-level element should be object, but BEGIN_OBJECT found.
I did note that bower search --json (like Webstorm does, without specifying a package) returns bower usage information as a json object, which is funny, and I'm fairly confident this is the problem. There are no relevant issues on the Webstorm forums.
This is really taking the 'I' out of 'IDE'.
Can anybody offer a solution?
Here's what I'm seeing (or not seeing).
UPDATE: I was correct in my original assumption but I lack the expertise and time to solve it properly. My workaround is shown below. Bower's search command is supposed to run without arguments but, when Webstorm calls bower search --json, the command is interpreted as incorrect and returns the search usage as a json object. Silly stuff. Hope this helps somebody else.
problem is caused by recent changes in Bower (https://github.com/eppeters/bower/commit/5a1e5eb9c717b4210d6a4af77eca1951bdd9f288); it now requires a module name neing passed to search command (though documentation hasn't yet been updated accordingly).
Related JetBrains ticket: WEB-19389; fixed, fix will be available in next update
This is a gross fix and is unsuitable for use as long as there is any hair remaining on your head:
In [npm prefix]/bin/lib/node_modules/bower/lib/util/cli.js
I added the following to intercept the command line options and force an empty search pattern:
function readOptions() {
...
noptOptions = nopt(types, shorthands, argv);
...
// ADDED THE FOLLOWING
if (noptOptions.argv.original.length == 2 && noptOptions.argv.original[0] == 'search' && noptOptions.argv.original[1] == '--json') {
noptOptions.argv = {
remain: ['search', ''],
cooked: ['search', '', '--json'],
original: ['search', '', '--json']
};
//////////////////////
...
}

Error using Compass 1.0alpha, Sass 3.3, and Susy 2.1.2

I used Fire.app before but they haven't updated for a long time.
Then I turn to Compass 1.0.0alpha, Sass 3.3, and Susy 2.1.2
I installed via gem:
compass (1.0.0.alpha.19)
compass-core (1.0.0.alpha.19)
compass-import-once (1.0.4)
sass (3.3.8)
susy (2.1.2)
While creating a new project using susy:
compass create --using susy,
an error reads:
error sass/style.scss (Line 4 of sass/_grids.scss: File to import not found or unreadable: susy.
Load paths:
/******/sass
/Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets
Compass::SpriteImporter)
Many articles say a 1.0alpha version of compass will do, but it appears not.
How do I solve the problem? Thanks!
I don't know where SpriteImporter figures in your website. However, I would suggest installing Bundler, creating a Gemfile to include at least these two:
gem "susy", "~>2.1.0"
gem "sass", "~>3.3.0"
Then let Bundle install all the gems required. In case you aren't aware, this will be done inside Terminal on mac. The Bundler website explains all.

Syntax Error in _maps.scss in Susy 2.0

"Syntax error: Invalid CSS after \"...th($_keys, $_n)\": expected \")\", was \": $_value);\"
on line 57 of *myPath*/sass/lib/susy/math/_maps.scss
from line 4 of *myPath*/sass/lib/susy/_math.scss
from line 4 of *myPath*/sass/lib/susy/language/_susy.scss
from line 4 of *myPath*/sass/lib/_susy.scss
from line 4 of *myPath*/sass/screen.scss"
I am getting this syntax error when trying to use the new Susy 2 with Compass. I wanted to upgrade from version 1 manually and copied the contents of the downloaded sass folder into my sass/lib. Therefore, I do the import with #import "lib/_susy";.
Anyone knows if this is my fault or a bug?
Had these problems as well. To fix, I had to:
Upgrade to Sass 3.3 RC5 (gem install sass -v 3.3.0.rc.5)
Upgrade to Compass 1.0.0.alpha.18 (gem install compass -v 1.0.0.alpha.18)
This should fix it for you, too.
Edit: Sass 3.3 has now officially been released, so you can install the production version. Compass 1 is still in prerelease.

Resources