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
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
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've uploaded a React project to CodeSandbox locally using the codesandbox ./ terminal command.
CodeSandbox project link here.
In the pane to view the project it's throwing the error, "PostCSS received undefined instead of CSS string". Because of this I am unable to view the project in the browser.
It's highlighting the first two lines of my code in my 'variables.scss' file as errors:
$light-primary: #fdebeb;
$light-grey: #f1f3f6;
Why is this happening?
What i would suggest you to do is have a main.scss - which will contain imports of other scss files, by doing this i was able to resolve the error -
// variables
#import "./variables";
// other
#import "./general";
#import "./typography";
Now import this in your App.js. - https://codesandbox.io/s/nce-forked-jh4py
I'm working on a custom theme for my local WordPress site. I've set up a File Watcher in PhpStorm that compiles my scss files in myTheme/scss/ to myTheme/style.css.
This works as intended, the variables which I've declared in _variables.scss are able to be used in style.css or any file imported after it.
My problem now is that the #import '~foundation-sites/dist/css/foundation.min.css'; is being compiled as #import '~foundation-sites/dist/css/foundation.min.css'; instead of the actual css content.
I've tried using #import '../node_modules/foundation-sites/dist/css/foundation.min.css'; instead but this compiles the same way.
What am I doing wrong?
.css extension in import statement tells the compiler to generate plain CSS import instead of pulling the contents in; see https://github.com/sass/sass/issues/556#issuecomment-397771726 for reference.
I'd suggest changing your import to
#import '../node_modules/foundation-sites/dist/css/foundation' - this should help.
Note that ~ prefix is a webpack feature SASS compiler is not aware of. So, when using SASS in your file watcher, you have to either change paths to relative or pass --load-path node_modules/ to compiler
I ran into this issue and this solved it for me. Uncheck Track only root files, which is defaultly checked.
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.