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.
Related
I wanted to use this popup component from GitHub
I installed it using npm (I don't know how to do it otherwise).
I imported it to my App.js
import { Root, Popup } from 'popup-ui'
After importing it, I get this message:
Could not find a declaration file for module 'popup-ui'.
'c:/Repos/Budgeteer/node_modules/popup-ui/index.js' implicitly has an 'any' type.
Try npm install #types/popup-ui if it exists or add a new declaration (.d.ts) file containing `declare module'popup-ui';
`ts(7016)
#types/popup-ui does not exist. I got no idea what declaration means (total noob here). And I looked up ts(7016), and again I couldn't figure out what to do exactly, being a beginner.
When compiling, I get this issue:
C:/Repos/Budgeteer/node_modules/popup-ui/src/basic/Popup/index.js 10:1
Module parse failed: Unexpected token (10:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders
the error comes with this piece of code:
| static popupInstance
|
> static show({ ...config }) {"
| this.popupInstance.start(config)
| }
I took a look at the link and read up on loaders, but I got no idea what type of loader I need to install, how to install it or how to edit that webpack file. I can't even seem to find it.
Any help would be deeply appreciated. But please try to make it as detailed as possible, because I'm new to all of this.
Also, I'm using React Native with Expo if that matters.
Cheers.
If webpack is running tsc (the Typescript compiler) and it's complaining about a .d.ts, that's weird. If Webpack is saying "I don't have a loader defined for .d.ts files", that means something is trying to require a .d.ts, which should never happen.
I've had this problem when people have a broad Context defined, either via require.context(/too-many-files.*\.ts/), or require("/some/path/" + fileName). Webpack will try to statically analyze the latter statement, and treat (more or less) as require.context(/\/some\/path\/.*/)
Either way you wind up with it grabbing .d.ts files when it shouldn't. If you can fix the require / require.context so it excludes the typings, do that. If you can't, add a rule like {test: /\.d\.ts$/, use: "null-loader"}
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.
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.