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
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'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.
After installing the nativescript-dev-sass plugin, I renamed the app.css file in my /app directory to app.scss so that I could write sass in the file. The css file contained one import statement, so I changed it from:
#import 'nativescript-theme-core/css/sky.css';
to
#import '~nativescript-theme-core/css/sky.css'; //notice the tilde
I am using the tilde as mentioned in the readme of the nativescript-dev-sass repository here: https://github.com/NativeScript/nativescript-dev-sass
When I run tns run android I get the following error when my app starts:
JS: Error: Css styling failed: Error: /data/data/io.myapp.app/files/app/app.css:1:97: missing '{'
The resulting app.css file that is compiled from app.scss has the below line:
#import url(C:\my_workspace\myapp\node_modules\nativescript-theme-core\css\sky.css)
Column 97 of that line, as specified in the error message, is the one right after the closing parenthesis ), and there really shouldn't be a { there. So I have no idea why it's saying the the { is missing.
What can I do to fix this?
It might be that you need to use
#import '~nativescript-theme-core/scss/sky'; // #theme variables
instead of
#import '~nativescript-theme-core/css/sky.css'; //notice the tilde
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.