I am building an angular application. While trying to import style scss files, I am getting compile error:
File to import not found or unreadable: layout/menu.
My folder structure is:
Insurance\src\shared\styles.scss
and for a scss file that I want to include inside the styles.scss is:
Insurance\src\shared\styles\layout\_menu.scss
Inside styles.scss I have written:
#import "layout/menu";
in my angulaar.json file I have mentioned:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/shared/styles.scss"
],
However, when I compile the code it gives the following error:
#import "layout/menu";
^
File to import not found or unreadable: layout/menu.
in Insurance\Insurance\src\shared\styles.scss
File to import not found or unreadable: layout/menu.
Not sure why this is happening.
Is "styles" a folder within "shared"? If so, you want to say
#import "/styles/layout/menu";
Otherwise it won't know to look in the styles folder
Related
In a NextJS project that uses TailwindCSS, I have a global css file, index.css and I'm trying to import another file.pcss into the global css file. But, NextJS can't seem to find file.pcss, produces the error below:
Error: Can't resolve 'file.pcss' in '/home/chris/repo/styles'
index.css has:
#import 'file.pcss';
Not sure why this is happening because Next + Tailwind should support PostCSS without issue.
Figured it out!
When I converted both files to .scss files. Everything started working again.
Result:
global css file renamed to: index.scss
#import 'file.scss';
pcss file renamed to: file.scss
Solution came from: https://github.com/vercel/next-plugins/issues/565#issuecomment-561086895
The error is as below:
SassError: File to import is not found or unreadable: #library-x/core/style/main
from line 3 of ./styles/app.scss
contents of ./styles/app.scss
//more imports
#import 'variable'
#import '#library-x/core/style/main' //fails here
//more style definitions
folder structure
project root
---node_modules
------ #library-x
--------- core
------------ style
--------------- _main.scss
--- src
--- styles
------ app.scss
------ _variable.scss
If I change the import statement to #import '#library-x/core/style/_main' sass gets compiled perfectly.
On the order hand, the "#import 'variable'" works as expected.
Been scratching my head for this last few days, appreciate any help here. Thanks.
Your import path should be relative to the file that you're importing things to. So in app.scss you can reference _variable.scss with just the path variable, but for the _main.scss file, you would need to use the path ../../node_modules/#library-x/core/style/main.
If your webpack is configured to look for modules inside node_modules, you can replace the "../../node_modules/" part with a single ~. So the final path would look like ~#library-x/core/style/main.
I'm using Angular (Jhipster) on my application and I want to import several .scss files on my glocal.scss file. So I created an "util" folder (same level as global.scss file) and added these .scss partials inside it. On top of my global.scss file, I treid to do:
#import "util";
#import "util/*";
#import "util/;
And other alternatives, but I'm receiving this error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Can't find stylesheet to import.
When I import one file at a time, it works.
How can I import a folder with .scss files inside my global .scss file?
I doesn't look like you can import a directory/folder based on this.
What you can do is in your utils folder create an index sass file that imports all the partials then importing utils should work based on this.
In Less I can do something like this
#basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "#{basePath}less.less";
So I tried to do the same thing in Sass
$basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "${basePath}less.scss";
// Syntax error: File to import not found or unreadable: ${basePath}less.scss.
and
#import "#{basePath}less.scss";
// Syntax error: File to import not found or unreadable: #{basePath}less.scss.
Is there a way to do this in Sass?
You can't use conditional stuff for imports in SASS.
Consider creating a Compass extension out of your project.
You cannot use variables in import paths as already mentioned. What you can do is use the -I or --load-path option to specify a directory to search from.
sass --watch sass/:css/ --load-path ../../path/to/library/
Let's say you have a directory structure like this:
themes
hotdog
_variables.scss
classic
_variables.scss
styles.scss
Your styles.scss should have import paths that are relative to the provided load-path(s):
// note the import here doesn't contain themes, hotdog, or classic
#import "variables";
#debug $foo;
Your commands would look something like this:
# hotdog
sass styles.scss hotdog.css --load-path ./themes/hotdog/
# classic
sass styles.scss classic.css --load-path ./themes/classic/
See the Sass options documentation for more information.
I am trying to follow this tutorial , I am not able to resolve the issue that the import of bootstrap does not work with the following error:
Error: File to import not found or unreadable: ../public/lib/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.
SCSS File looks like this:
$brand-primary: #967ADC;
$brand-success: #A0D468;
#import "../public/lib/bootstrap-sass official/vendor/assets/stylesheets/bootstrap";
.sample { background: $brand-success; }
the generated css file contains following error:
Backtrace: style/style.scss:3
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.12/lib/sass/tree/import_node.rb:66:in
`rescue in import' ...
According to the bootstrap-sass official ReadMe I do not have to import bootstrap at all, but without the import statement, it does not know the bootstrap variables.
googling has not brought any success unfortunately