Adding custom theme - scss - css

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

Related

NextJS "Can't resolve" error attempting to import PostCSS file

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

CodeSandbox - PostCSS received undefined instead of CSS string

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

`JS: Error: Css styling failed: missing '{'` in nativescript-dev-sass plugin

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

Undefined variable: compilation errors in Foundation 5 Sass project

I'm trying to build my first Foundation 5 project, and am new to CSS frameworks. I've successfully created a Sass project using the Foundation CLI, and when I hit index.html in the browser it all looks fine with Foundation 5 styling.
My /scss folder has 2 files, _settings.scss and app.scss which is simply
#import "settings";
#import "foundation";
This is the order recommended on ZURB forums. At this point, I thought you could start amending _settings.scss to customise things, but every time I uncomment a line in the file I get
error scss/app.scss (Line 47 of scss/_settings.scss: Undefined variable: "$font-weight-normal".)
type warnings from Compass. Why are the global variables undefined?
From the docs, these basic Sass variables are held in the _global.scss partial. I've checked my project and they are indeed defined there - so why do we
#import "settings";
before we
#import "foundation";
?? Any help with getting up and running greatly appreciated. I've not touched any of the Foundation files held in bower_components, just trying to amend _settings.scss in the /scss directory (which seems to be what you are supposed to do.)
You need to uncomment global variable $font-weight-normal
It's in _settings.scss line 44

How do you know what line contains a SCSS error when using #import in rails application manifest?

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.

Resources