In project SCSS files I'm using relative paths to libraries:
#import "../node_modules/packagename/styles";
I would like to use include paths for them:
#import "packagename/styles";
It is fine for the compiler (node-sass) that was supplied with full path to node_modules with includePaths option.
However, IDE inspector throws
Cannot resolve directory 'packagename'
Can it be fixed without turning off the inspection?
Marking node_modules as Resource Root (Mark directory as/Resource root) should solve the issue
Related
When attempting to import the scss of an npm package using gulp-sass/node-sass/libsass, it fails on
../../app/assets/stylesheets/_engine.scss
Error: File to import not found or unreadable: bootstrap-material-design/scss/core
Parent style sheet: /Users/kross/projects/acme/app/assets/stylesheets/_engine.scss
on line 6 of ../../app/assets/stylesheets/_engine.scss
>> #import "bootstrap-material-design/scss/core";
^
Versions:
node-sass#3.4.2
gulp-sass#2.2.0
While investigating this issue, I've narrowed down potential external issues. It doesn't matter which file is substituted in this location, or it's contents (even empty contents), libsass seems to be unable to find the nested #import relative to the path of the found file.
In this case:
includePaths: ['../../node_modules']
Compilation command cd spec/dummy && gulp sass targets application.scss
Structure
Note: it is clear that core is found within the bootstrap-material-design package inside node_modules
It is clear that the nested file _core.scss is found, but that the nested file cannot find a file relative to it.
Also note, that if my cwd is at the root of this project, I _can_compile. Moving the cwd down into spec/dummy and compiling, suddenly this nested relative file is no longer found.
What am I missing here?
I switched the includePaths relative path to a fully qualified path and it works. This appears to be a bug.
The workaround is to ensure that any passed-in includePaths are fully qualified directory names.
This gulp-pipeline recipe uses findup to do this:
options: {
includePaths: [findup('node_modules')] // find any node_modules above the current working directory and return the fully qualified path
}
I want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
#import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the #import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it
I have a mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
I have a project where the basic asset folder structure looks like this:
/css
/css/sass
/js
/images
When I compile the SASS files, it places them into the css folder above. I do it this way to try and keep my directory structure logical and simple.
I'm using relative paths in my SASS files to link to images:
background: url(../images/foobar.png);
However, since the path is relative from the CSS directory, PHPStorm flags it as an error.
Is there any way to configure PHPStorm to be able to recognise assets from a destination path, and not just directly from the SASS file?
Replace:
background: url(../images/foobar.png);
With:
background: image-url('foobar.png');
To use the compass image-url() function. The inspection errors from PHPStorm will then disappear, and compass will automatically generate the correct path based on the image resource root.
I'm having a problem getting XCode to deal with a particular file structure that I am using or that I wish to use.
I have a set of files in the following form...
Library
Headers
Library
Package1
Header1.h
Header2.h
HeaderN.h
Package2
Header1.h
Header2.h
HeaderN.h
PackageN
Header1.h
Header2.h
HeaderN.h
Source
Package1
Source1.m
Source2.m
SourceN.m
Package2
Source1.m
Source2.m
SourceN.m
Package3
Source1.m
Source2.m
SourceN.m
The include model I want for code outside of this library is...
#import "Library/Package/Header.h"
I want to point XCode at Library/Headers but not at the internal folders. When I add this tree to the project XCode seems to make implicit include paths to every node in the tree.
Client code within the project but outside this tree can do this...
#import "Header.h"
instead of...
#import "Library/Package/Header.h"
I can't seem to find a way to dissallow the non-qualified form.
Any help would be appreciated.
Thanks,
-Roman
You're running up against Xcode's behaviour that it builds a flat-headermap. You can disable this by adding the build setting:
HEADERMAP_INCLUDES_FLAT_ENTRIES_FOR_TARGET_BEING_BUILT=NO
to your project settings.
If you include the headers in files in the project then XCode will always find them without path qualification, as you've discovered. The best solution is to remove the headers from the project and specify "Library/Headers" as a header search path in your project settings. The headers won't show in your project, but they also won't be implicitly found by XCode while compiling, either; client code will have to specify the full path off of "Library/Headers" to get to the header file they want.