UPDATE - when I put the file here, it works, the scss file is compiled into a css file.
\workspace\packages\amc-custom-theme\sass\etc\extra.scss
But a line in index.html referencing the new css file is not added. How do I make that happen?
I'm starting to use Sencha Cmd. I put a custom sass file here:
\workspace\extApps\MyApp\sass\etc\extra.scss
But it is not being compiled into the AMC-all.css file.
For now this is the contents of the scss file:
#import 'compass';
.actionColumnIcon {
margin-right: 10px;
cursor: pointer;
}
Its just a test. But I need it to work to continue.
Try sass/all.scss instead of sass/extra.scss.
Related
I have installed sass package in the codesandbox here which is just simple CRA with sass package installed.
In src/scss/main.scss file I have code like:
#use './partials/mixins' as *;
body{
#include mq2;
border: 2px solid pink;
}
and in the src/scss/partials/mixins.scss file I have code like:
#mixin mq2{
background: pink;
}
I am trying to use a simple mixin in sass in CRA but it throws errror like:
Error: no mixin named mq2
on line 9:12 of /stdin
>> #include mq2;
The proble is with codesandbox environment as I tested same code locally and it works without any such errors.
In React project, I am running linter on js and scss files. In scss files, I have used #import statement but lint gives me following error
Parsing error: Unexpected keyword 'import'
#import './../shared/variables.scss';
I want linter to ignore these #import lines.
Do I need to add any rule in in eslintrc file?
Currently I am having following import rules in config:
'import/no-unresolved': 0,
'import/no-dynamic-require': 0,
'import/no-extraneous-dependencies': 0
Is there any comment line for scss files to ignore specific line, like we have it for js files? e.g. // eslint-disable-next-line
I have gone through a lot of online sources and added babel-eslint parser as well and also passed parserOptions too but nothing is working.
According to https://github.com/eslint/eslint/issues/12752#issuecomment-571561845 :
Looks like the cause is eslint 'src/**' command. You are linting other files than JavaScript.
In my src folder, I have assets/styles folder where my global scss files are.
In my index.scss I import them like this
#import 'assets/styles/colors.scss';
#import 'assets/styles/links.scss';
#import 'assets/styles/basics.scss';
And then in index.js, I import compiled index.css
Problem: In basics.scss I'm using variable from colors.scss and getting an error Undefined variable: \"$black\".
And the same happens in components scss files if they use variables from that file. I really don't want to import colors in every single component. Is there a way to make these 3 files global?
To work with scss in reacting I'm using Adding a CSS Preprocessor (Sass, Less etc.) (Since moved here).
UPD
Use partials when importing parts into index.scss
#import 'assets/styles/colors';
#import 'assets/styles/links';
#import 'assets/styles/basics';
The filenames should be
_colors.scss
_links.scss
_basics.scss
You can read more about this in the SASS docs under the Partial section.
I am creating a react app with the create-react-app and I have tried to implement SASS pre-processor by following these steps over here. So everything went well and I have developed already some parts of my application. But for a really weird reason, I now got a error on compiling after already 2 days of development, without any reason I can imagine.
{
"status": 1,
"file": "/Users/glenngijsberts/Documents/Development/toggle/src/components/sass/assets.scss",
"line": 2,
"column": 9,
"message": "Undefined variable: \"$primary\".",
"formatted": "Error: Undefined variable: \"$primary\".\n on line 2 of src/components/sass/assets.scss\n>> \tcolor: $primary;\n --------^\n"
}
So the main problem is that I get now a compile error because my assets.scss can't access the variables. Assets is imported in my App.scss which also imported variables.scss.
In my App.scss file
//Import SCSS
#import "./sass/vars.scss";
#import "./sass/popup.scss";
#import "./sass/assets.scss";
#import "./sass/utils.scss";
#import "./sass/modal.scss";
#import "./sass/dropdown.scss";
#import "./sass/visualLine.scss";
#import "./sass/dashboard.scss";
#import "./sass/tabs.scss";
#import "./sass/projects.scss";
#import "./sass/colors.scss";
What is working is:
assets.scss
//Import SCSS
#import "vars.scss";
span.brand {
color: $primary;
}
But ofcourse, I don't like to include that vars file on every scss file where I want to use a scss variable. I am not used to it either (when using just sass files with a regular webpack project).
You have to put "_" to beginning name of every file you want to globally import. So your vars.scss would be _vars.scss. Sounds weird, but works.
If it won't help, rename your files to *.sass and use sass syntax. It is simplier and would work on 100%.
I am building an ExtJS 4 application backed by SASS/Compass for its theme.
I would like to generate 2 files:
my-ext-theme.css
my-ext-theme.min.css
I currently have a "my-ext-theme.scss" file that I am successfully compiling to "my-ext-theme.css". The issue is that I want 1 scss file to compile to 2+ css files. Additionally, I would like those css files to be in any directory I want.
Note: I do not want to add a config.rb file so that it outputs "only" to different directories (i.e. "css/my-ext-theme.css" and "css2/my-ext-theme.css").
Any suggestions?
Current Solution (little annoying)
my-ext-theme.scss // my sass code here
my-ext-theme.min.scss // #import 'my-ext-theme';
compass compile my-ext-theme.scss // development
compass compile --output-style compressed my-ext-theme.min.scss // production