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
Related
Hello im trying to import my sass variables in react project to other scss.
I made new scss in src/sass/_variable.scss.
And im trying to import it in src/Pages/Home/Home.scss.
I was trying to use #import and #use and still have error.
When im trying to #use i got this error Error: Undefined variable.
When im trying to #import i got this errror: Not Found.
The path its good.
I tried with node sass and dart sass.
The weird thing is that it only works when im import sass in same directory..
#import '../../Style/Var.scss';
Write it at the top of the file scss
Please check this link it will help you.
https://sass-lang.com/documentation/at-rules/import
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
I have NextJs project with following structure
-pages
-_app.tsx
-app
-styles
-antdstyles.less
inside _app.tsx i am trying to load import '#styles/andstyles.less which simply imports antd styles ass this #import '~antd/dist/antd.less';
However i get error saying
/app/styles/antdstyles.less
#import '~antd/dist/antd.less';
^
'~antd/dist/antd.less' wasn't found. Tried - /home/computer/job/proj/app/styles/~antd/dist/antd.less,/home/computer/job/proj/css/~antd/dist/antd.less,/home/computer/job/proj/~antd/dist/antd.less,~antd/dist/antd.less
you have to use less loader and config it in next.config.js of your project. it's not supported to use less in next app out of the box.
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
I have a scss file starting with:
#import "styles";
#import url("http://lctools.lundbeckconsulting.no/SASS/STATIC/lct.public.scss");
Contains a media rule:
#media (max-width: $media-small-width) { //code }
But when compiling the file in Visual Studio I get an error saying that $media-small-width is an Undeclared Variable, even though it exists in lct.public.scss that's imported from the external site.
Using variables from styles.scss (local file) works as expected
This is happening because the import function will only import external files as a CSS import rule - it will not actually import the SCSS from that external file into the rest of your code.
You will need to declare your variables inside your local files. (This might not be the answer you were hoping for. Sorry!)
Documentation on import from SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_import__import