I'm pretty new to Node and i'm trying to use Susy grid but get this error
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/waterbottle.scss
Module build failed:
#include gallery(1 of 2);
^
No mixin named gallery
I installed Susy and sass-loader with this command
npm install sass-loader --save-dev
and imported Susy in my .scss file like this
#import "~susy/sass/susy";
I've tried changing this path with no luck. I shouldn't have to do that according to their website.
My project file structure
It seems Webpack is locating the Susy file correctly, but somehow won't recognize it's mixins.
You likely installed Susy3 without reading the changelog. Susy3 no longer has a gallery mixin. Check the susy3 intro and documentation for more details. Susy2 will be maintained for the foreseeable future, if you want to stay with that.
Related
I have the following structure for a web component:
-moduleA
-node_modules
-my-sass-package-a
-node_modules
-my-sass-package-b
_my-partial.scss
package.json
_my-partial.scss
package.json
styles.scss
package.json
In styles.scss I import a SCSS asset from my-sass-package-a:
#import 'my-sass-package-a/my-partial';
In my-sass-package-a/my-partial I import my-sass-package-b:
#import 'my-sass-package-b/my-partial';
sass-loader throws the following error (bur the error is really coming from the blackbox that is node-sass)
SassError: File to import not found or unreadable:
my-sass-package-b/my-partial
The following SOs do not help and are not specifically addressing my context/case:
https://stackoverflow.com/a/35018624/1258525 (this one does not work because they are hard coding the nested depth package, I cannot hard code "my-sass-package-b" into my includePaths
Importing Sass through npm (this one is not working with SASS npm packages but relative SASS assets)
This is issue is one of depth resolution in a nested dependencies.
Is there a way to hook into node-sass resolution and provide hints to look in nested node_module at each resolution root context?
Is there a way to change node-sass options to recursively look for SASS packages in nested node_modules without harding coding my-sass-package-b into my includePaths, again this is not an option for me. (I do not see a node-sass option that help my scenario)
I am new to Node.js development and I have installed WebStorm from JetBrains to use it as my JavaScript IDE.
So I am following a tutorial in Udemy and I have come to notice the following problem.
I installed some modules with npm from WebStorm Console and although my JS script is working as intended, WebStorm autocompletion for the npm modules is not working.
Coding assistance for Node.js in my settings is marked! What do I do wrong?
The problems occur because of the weird way properties are defined.
For example, in chalk package they are generated dynamically using Object.defineProperty(this, styleName, {value: builder});, where the styleName is a color name you use in your code. There is no way to resolve them when analyzing file statically.
Normally installing Typescript stubs can be used as a workaround. But this doesn't work for validator due to WEB-43528.
chulk typings are included in package distribution, but not resolved because the required fields in package.json are missing. As a workaround, open node_modules/chalk/package.json and add "types": "index.d.ts", to it:
this should help:
I installed plugin for Intellij-Idea and it doesn`t work. Why can it be? As you can see the require word doesn`t become yellow.
And here is my plugin installed:
Please make sure to enable Node.js Core library in File | Settings | Languages & Frameworks | Node.js and NPM
I like to hover over things that are underlined to give me clues as to where to start. Your "path" and "require" are underlined. Your errors might say Unused local variable 'path' and Unresolved method or function require()
You might not have installed node in the current project. If you don't have node installed, try:
npm init to create a package.json file.
IntelliJ will walk you through creating the file. You can just press enter all the way through if you want and edit it later.
npm install express --save (replace express with whatever library you are trying to use) to save library in the dependencies list
Installing express
How can I fix WebStorm warning “Unresolved function or method” for “require”
I had integrated sass suport in angular2 seed (https://github.com/mgechev/angular2-seed) and also installed susy form npm(npm install susy --save-dev) but when I imported susy form .scss file it gives following errors
[13:01:16] Starting 'build.html_scss'...
Error in plugin 'sass'
Message:
src/client/css/main.scss
Error: File to import not found or unreadable: ~susy
Parent style sheet: /home/jorin/WebStormWorkSpace/nylndaUI/src/client/css/main.scss
on line 1 of src/client/css/main.scss
>> #import "~susy";
^
[13:01:16] Finished 'build.html_scss' after 218 ms
Anybody who can guide me, what I am doing wrong?
In your sass, correct the path to susy.
It could be
#import "~susy/sass/susy";
The Susy install Guide suggests to use bower and to use a relative path.
bower install susy --save
#import "../bower_components/susy/sass/susy";
But there's no reason you couldn't use the path to your npm-installed susy:
#import "../node_modules/susy/sass/susy";
If you're taking this method, this file is relative to your sass file, so it could be something like
#import "../../../../node_modules/susy/sass/susy";
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