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%.
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.
with the gatsby-starter-default build, running gatbsy develop, the build shows the following output:
src/layouts/index.css
undefined [undefined]
src/components/Footer/index.module.css
undefined [undefined]
What does this mean? The build seems to have succeeded. The only clue is that both these css files #import a variables.css file which uses custom css properties like :root { --blah-color: #ff3333; }. So that seems to be the issue but what is the process that is failing / printing undefineds?
I found the answer here: https://github.com/gatsbyjs/gatsby/issues/2462
quoting relevant bits:
postcss-reporter version used by gatsby has a small issue where it
prints out undefined [undefined] for every #import ... in *.module.css
files
The printed message is annoying but harmless.
Eg: I want to import a file called #import 's-grid-settings' in multiple different stylus files. Is this a bad idea?
It depends :)
Stylus have two ways of “importing” other stylus documents: via #import and via #require.
The difference is that #import would import the file each time, while #require would do this only once.
#require this way could be useful to share the settings and/or some common stuff like placeholders etc. between multiple stylus files in a such way those files could be either compiled each by itself or as a bundle. If the #import was used in this case, it would include all its stuff every time it was called, while #require would do this only once at the first call.
So, the answer to your question would depend on what is there inside your file.
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.