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
}
Related
Folder structure:
Error description:
Sass version:
ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.
OS: MX Linux.
Sass is able to compile my code just fine if i don't use #use or #import.
Try importing like below with a relative path:
#use ./abstracts/resets
Here is an overview of how Sass imports files:
Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; #import "variables" will automatically load variables.scss, variables.sass, or variables.css.
⚠️ Heads up
To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use #import "susy" to load node_modules/susy/sass/susy.scss.
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
💡 Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
I have the following 4 files:
/src/images/image.png
/src/scss/main.scss
/src/scss/test/test.scss
/src/js/entry.js
In main.scss I have the following code:
#import './test/test.scss';
In 'test.scss' I have the following code:
.test {
background-image: url(../../images/image.png);
}
And in 'entry.js' I have the following code:
import './../scss/main.scss'
When I try to build this project with webpack, I get an error, that the image.png file can not be resolved. It appears, that when I build this project, test.scss thinks that it's relative folder is /src/scss/. If I change ../../images/image.png to ../images/image.png everything works correctly.
Is there any way to tell webpack or sass-loader to threat every imported file, as a separate file, and always use paths relative to the currently opened file? Or is there any way to specify paths from the root folder of my application (/src in this case)?
I am using bootstrap-sass. The node module is installed. I should expect I can, in any .scss file, use the below line to import into an appropriate sheet
#import 'bootstrap';
My understanding is what should happen is the compiler crawls up until it finds package.json, hops into node_modules, and finds the appropriate package. Instead I am getting the below error.
Error: File to import not found or unreadable: bootstrap
If I replace my import with a fully qualified path as below, then everything works gravily.
#import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
I am using gulp-sass to compile. Guessing I just have some minor config bits off but I can't figure out what it is.
Pass the path as an includes path....
Eg. It will look something like this if you're using gulp
.pipe(sass({
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']
}))
Then you should be fine to use:
#import 'bootstrap';
It will not import stuff like Javascript / Node.js. It will look for the bootstrap file in the same folder as the file which imports it. So yes, you need to use the long path or place the bootstrap file in the same folder.
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
I have a simple Rake Pipeline setup that does nothing more than run "stylus" on my .styl files, using the rake-pipeline-web-filters gem. (The original pipeline does much more, but I've trimmed it down to the essentials for this question.
=== Assetfile ===
require "rake-pipeline-web-filters"
output "build"
input "app/style" do
# Compile Stylus to CSS
match "*.styl" do
stylus
end
end
This works fine for converting individual .styl files to individual .css files.
However, I am not able to use the Stylus #import command to import one file in another (necessary for mixins, among other things. Instead I get the error
ExecJS::ProgramError: Error: stylus:1
> 1| #import "appmixins"
2|
failed to locate #import file appmixins.styl
All the styl files are in the same folder, and when I execute stylus on the commandline using the npm version, the import works fine, so there's no syntax error.
Is this just something that's missing from the Stylus Filter in rake-pipeline-web-filters, or is there something I can do to make it work?
Ok, it looks like when I run the in Rake Pipeline in assumes all paths are starting from the directory I'm running the pipeline in, and so all the #imports have to be relative to that. Changing my imports to #import "app/style/appmixins" worked. This is different from what the NPM version of Stylus does, since it expects (and the docs specify) that all the paths are relative to the individual stylesheets. Not sure if I could have specified the block differently in the Assetfile to make this work as expected, but no matter, it all works for me now.