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.
Related
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%.
Just starting with Ionic 2. My first app fails with error:
Error: Import directives may not be used within control directives or mixins.
on line 34 of node_modules/ionic-angular/components.core.scss
#import "fonts/ionicons";
Anyone encountered this problem and knows how to solve it? Would be very grateful for your help!
I found a solution for this:
One of the dependencies has updated (one that is related to sass). In order to fix this issue without changing the files under node-modules is to use specific versions for gulp-sass and node-sass. Use the following commands:
npm install gulp-sass#2.2.0
npm install node-sass#3.4.2
In the current beta (v2.0.0-beta.5) combined with Sass Sass 3.4.13 there seems to be a bug with an #import inside an #if. This is not allowed.
Comment out the #if structure in node_modules/iconic_angular/components.core.scss to look like this:
$ionicons: true !default;
// #if ($ionicons) {
#import "fonts/ionicons";
// }
On top of that there seems to be an issue with some declarations in the Sass file for windows. If you don't need Windows for now change the sass include defintion in node_modules/ionic-gulp-sass-build/index.js to read (so removing the include for windows).
...
src: 'app/theme/app.+(ios|md).scss',
...
This bug fixed in ionic "2.0.0-beta.6" version. You can update or check this commit fix saas errors
Go to node_modules/ionic-angular/components.core.scss and set the variable ($ionicons) to false.
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.