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
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'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 used https://github.com/Swiip/generator-gulp-angular to boilerplate my angularjs application.
I discover bootswatch theme flatly and want to use it and downloaded from [http://bootswatch.com/flatly/][2] two files, _variables.scss and _bootswatch.scss.
I added these two files to my vendor.scss
$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/variables";
#import "flatly/bootswatch";
and with gulp serve, I build my application and on console it shows me.
project developer$ gulp serve
[21:28:41] Using gulpfile /Volumes/Developer/angularjs/project/gulpfile.js
[21:28:41] Starting 'styles'...
[21:28:42] gulp-inject 2 files into index.scss.
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Volumes/Developer/angularjs/project/src/app/flatly/_bootswatch.scss:16: error: unbound variable $navbar-default-bg
[1]: https://github.com/Swiip/generator-gulp-angular
[2]: http://bootswatch.com/flatly/
Why unbound variable $navbar-default-bg but the $navbar-default-bg exists in _variables.scss file.
$navbar-default-bg: $brand-primary;
My project structure:
Import the _variables.scss file at the beginning of your custom index.scss:
#import '../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables';
Another way around could be following these instructions >> https://github.com/Swiip/generator-gulp-angular/issues/379. I haven't tried this, though.
Try importing in this order variables, bootstrap, bootswatch as per
https://github.com/thomaspark/bootswatch/blob/gh-pages/global/build.scss
#import "flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/bootswatch";
The boilerplate attempts to compile all .scss files in the src folder (When it should ignore scss files starting with _).
Moving flaty outside of /src makes it behave eg
#import "../../flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "../../flatly/bootswatch";
I am using Rails 4, sass-rails 4.0.2 and my application.css.scss file looks like:
#import 'foundation_and_overrides';
#import "font-awesome";
#import "vendors/*";
#import "layout";
#import "modules/*";
However, I am getting an undefined mixin error as follows:
Undefined mixin 'box-shadow'.
(in C:/Rails/austin_residence/app/assets/stylesheets/application.css.scss:4)
The problem is I do not know how to debug this since the error is reporting css lines from the application manifest file instead of the actual #import file containing the error. How do people deal with this?
Start commenting out the #imports in your application file. When you don't see the error anymore, its probably in the file you stopped importing.
i am getting this error;
Syntax error: File to import not found or unreadable: ext4/default/all.
Load paths:
C:/xampp/htdocs/proj/app/resources/sass
E:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
E:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter
on line 8 of C:/xampp/htdocs/proj/app/resources/sass/my-ext-theme.scss
In the C:/xampp/htdocs/proj/app/resources/sass/my-ext-theme.scss file, my line 8 looks like;
#import 'ext4/default/all';
I am clueless as what is causing this issue. Can someone guide me to what i am doing wrong ?
UPDATE
EXTJS file is placed in app/extjs
Then ;
SASS
app/resources/sass/my-ext-theme.scss
app/resources/sass/config.rb
CSS
app/resources/css/my-ext-theme.css
THE COMMAND I USED TO COMPILE
\app\resources > compass compile