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.
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.
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%.
My folder structure is as follows:
In my App.Js (which is under the components folder), I have:
import variables from '/src/EnvVariables/variables.json';
However, I get an error:
You attempted to import /src/EnvVariables/variables.json which falls
outside of the project src/ directory. Relative imports outside of
src/ are not supported. You can either move it inside src/, or
add a symlink to it from project's node_modules/.
I have also tried:
import variables from './src/EnvVariables/variables.json';
import variables from '/src/EnvVariables/variables.json';
import variables from '/src/EnvVariables/variables.json';
import variables from '/EnvVariables/variables.json';
import variables from './EnvVariables/variables.json';
All either give the above error, or say "can't resolve file".
This file is in a folder that is under /src, as they said. But it still tells me it must be under the /src/ directory. How can I import my variables.json file? I don't want to just put it under "components", i prefer to better organize it.
Have you tried to import with the relative path? (with one or more ../ sections)
import variables from "../EnvVariables/variables.json"
Of course, if you prefer absolute paths you can setup https://webpack.js.org/configuration/resolve/, but I believe for first, you should try the first solution
Do ../../ before path
source={require('../../assets/eating.png')}
if you just need to import your any file to a component : (just follow this steps)
Simply you can create a .env file in src directory .
In that .env file you need to add this line only NODE_PATH = src/
Then you can write import "Home.css" (your file name will be here) to a component from src, it will take it easily.
Run the program again , then you will get the same error, but take
it easy and just you have to do fully start your program with the npm start from
a new terminal.
Is it necessary to use a css preprocessor like less or sass to be able to access the defined color variables in Blueprint.Colors?
I've looked at the source and those only appear on .scss and .less files. However, the documentation assumes the variables are accessible with the default setup.
Blueprint.Colors is a JS object that can be used in your JS code. It does not require a CSS preprocessor because it's just a plain JS object (source code). Examples: Blueprint.Colors.BLACK, Blueprint.Colors.BLUE3.
The Sass variables all begin with $ and can only be used in Sass files that import the Blueprint variables.scss file. Examples: $black, $blue3. (Less variables have the same names but use an # prefix: #black.)
(It's also possible, but nontrivial, to use the JS variables in a CSS preprocessor. We do this internally by generating the Sass variables from the JS object.)
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.