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
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
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 followed documentation of react-slick step by step.
I installed both react-slick and slick-carousel but whenever I import the css i always get this error Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'
also this error Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules)
I'm using Reactjs with nextJS
Any suggestions please?
Ok. So this is my first lLaravel project. And I got into an odd issue. I am trying to customize the authentication forms by using bootstrap and my own added SASS files (which then are converted into the main app.css). So here is what is the issue: in the app.scss file I have imported the SASS partials and other external resources:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
// ADDED Login
#import "login";
In this form, when the app.scss file is translated into the app.css, I receive an error "File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap.
on line 6 of resources/assets/sass/app.scss". Anyone has any idea on how to fix this, suggestions on how to manage my css and sass files? Thank you in advance for your time.
I found a quick fix, but I am not sure that it is the best one. I downloaded a bootstrap.min.css and added it in public/css/ . Then, in the app.scss I imported the bootstrap file "#import "bootstrap.min.css";". That turned out to be a fix so far.
Simply just add a ~ to beginning of the imported directory
#import "~node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
it should be like above.
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