Getting the following error when I'm trying to save my scss files:
File to import not found or unreadable: compass. (Sass::SyntaxError)
My Sass builder config:
{
"output_path": "../css",
"options": {
"cache": true,
"debug": true,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
Installed the following packages with my Sublime Text 2:
https://github.com/bnlucas/SassBuilder
https://github.com/WhatWeDo/Sublime-Text-2-Compass-Build-System
So the question is, what am I doing wrong here? Do I need to add something in my build config?
Thanks in advance!
Related
I'm using karma-typescript, with this karma config file :
karmaTypescriptConfig: {
compilerOptions: {
target: "es5",
lib: ["dom", "es2015", "es2017"]
},
bundlerOptions: {
transforms: [require("karma-typescript-es6-transform")()]
}
},
In my spec files, I have this code :
import {} from './local/lib.js'
In my lib.js, I have this code :
async function() {}
When executing my tests with npm test, I have this error :
ERROR [source-reader.karma-typescript] Error parsing code: Unexpected token (X:Y) in /local/lib.js
If I remove the async keyword, everything is alright.
How can I edit my karma config file to fix the error ?
According to an issue in the Github of the karma-typescript package (https://github.com/monounity/karma-typescript/issues/344), there is an undocumented flag which may help you test code which contains ES2017 code:
karmaTypescriptConfig: {
compilerOptions: {
target: "es5",
lib: ["dom", "es2015", "es2017"]
},
bundlerOptions: {
acornOptions: {
ecmaVersion: 8,
},
transforms: [require("karma-typescript-es6-transform")()]
}
},
This flag made appear our issues with the async keyword. However, there is still an issue with the spread syntax (...array) in our code, even using this flag. If anyone knows an answer how to also fix that, I will happily extend my answer.
I am building a site using Visual Studio and WebCompiler is enabled.
When I compile on build my path files are changing to:
../../img/icons-#2x.png
rather than what the expected outcome is:
../img/icons-#2x.png
This is my current compilerconfig.json file:
[
{
"outputFile": "dist/css/style.css",
"inputFile": "styles/style.scss",
"sourceMap": false,
"relativeUrls": false
}
]
I've racked my brains/googled for hours but cannot figure out what is causing this to happen?
Just to note I resolved this issue by including the following in my compilerconfig.json:
"options": {
"sourceMap": false,
"relativeUrls": false
}
Following Protractor guide I wanted to create my first test. While the test works unfortunately JetBrains WebStorm does not recognize all of my variables in given test
I have enabled in Libraries/JavaScript:
jasmine
karma
karma-jasmine
HTML
Node.js Core
selenium-webdriver
As seen above Node.js Core library is enabled.
I have also visited this question but unfortunately the angular-protractor is no longer available.
What am I missing?
Your editor will understand it if its imported. Elese it will know where to find browser ot by
Add import statement at top of your file.
import {by, element} from 'protractor';
Use JS Hint RC. It will work like magic.
You can find this by going to
Settings -> Languages and Frameworks -> Javascript(select ECMA Script 6) ->Code Quality Tools- >JS Hint - Enable, use config file.
As for config file, save the bellow file, with following name: '.jshintrc'.
Rate the answer as positive if this worked for you!
{
"jasmine": true,
"mocha": true,
"esversion":6,
"loopfunc": true,
"node": true,
"globals": {
"esversion": 6,
"angular": false,
"browser": false,
"inject": false,
"_": false,
"driver": false,
"protractor": false,
"$": false,
"$$": false,
"element": false,
"by": false,
"list": false
}
}
I'm trying to import D3 so that I can use it in an Angular2 module.
Some background info:
I'm writing Angular2 in TypeScript.
I am using Angular2-seed
What I did:
I installed the NPM D3 package:
npm install d3 --save
I installed the D3 type descriptions using Typings, as that is what Angular2-Seed uses for the libraries it already has installed.
typings install d3 --save
Then, in my Angular2 module file, I added the import statement
import * as d3 from 'd3';
The result is that TSC is giving me the error message "Cannot find module 'd3'". What am I missing or doing wrong?
So if in package.json you already have a dependency for like:
"dependencies": {
...
"d3": "^3.5.17",
...
}
you then can go in /tools/config/seed.config.ts and add
'd3': '${this.NPM_BASE}d3/d3.min.js' in SYSTEM_CONFIG_DEV object, like:
protected SYSTEM_CONFIG_DEV: any = {
defaultJSExtensions: true,
packageConfigPaths: [
`${this.NPM_BASE}*/package.json`,
`${this.NPM_BASE}**/package.json`,
`${this.NPM_BASE}#angular/*/package.json`
],
paths: {
[this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
'#angular/core': `${this.NPM_BASE}#angular/core/bundles/core.umd.js`,
'#angular/common': `${this.NPM_BASE}#angular/common/bundles/common.umd.js`,
'#angular/compiler': `${this.NPM_BASE}#angular/compiler/bundles/compiler.umd.js`,
'#angular/forms': `${this.NPM_BASE}#angular/forms/bundles/forms.umd.js`,
'#angular/http': `${this.NPM_BASE}#angular/http/bundles/http.umd.js`,
'#angular/router': `${this.NPM_BASE}#angular/router/index.js`,
'#angular/platform-browser': `${this.NPM_BASE}#angular/platform-browser/bundles/platform-browser.umd.js`,
'#angular/platform-browser-dynamic': `${this.NPM_BASE}#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`,
'rxjs/*': `${this.NPM_BASE}rxjs/*`,
'd3': '${this.NPM_BASE}d3/d3.min.js',
'app/*': `/app/*`,
'*': `${this.NPM_BASE}*`
},
packages: {
rxjs: { defaultExtension: false }
}
Let me know if it help. Thanks!
I had the same issue, and the above answer helped for debugging my soltution - in that it identified it was a config issue, however using angular2#2.1.0 i had to update {root}/e2e/tscconfig.json (by adding:
"types": [
"d3"
]
as follows:
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../dist/out-tsc-e2e",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/#types"
],
"types": [
"d3"
]
}
}
Keep in mind that there is a tscconfig.json in {root}/src/ as well. I updated in this and I still had a dependency issue with:
import * as D3 from 'd3';
in my component that through the error. Hope this helps at least one person!
For Angular 5+
you can just do:
npm i -g typings
npm i d3#3.5.5 --save
typings install d3=github:DefinitelyTyped/DefinitelyTyped/d3/d3.d.ts#6e2f2280ef16ef277049d0ce8583af167d586c59 --global --save
I'm trying to use CSSLint with Sublime Text 3, but I can't seem to get it to use the .csslintrc file I've got in my project root.
Originally I thought it would be in JSON format, but then it turned out you have to use a command line syntax, so as a test I tried these in my .csslintrc file:
--ignore=ids,important
and
ignore=ids,important
But neither stop the linter from warning about the use of either??? Any suggestions? It does work if I just stick it in the user settings file, but since I use .jshintrc and other files in my projects for linting etc, and not everyone uses Sublime Text (I don't know why they wouldn't :), I'd prefer to have it all in .csslintrc
"linters": {
"csslint": {
"#disable": false,
"args": [],
"errors": "",
"excludes": [],
"ignore": "ids,important", // WORKS
"warnings": ""
},
}
First solution, you can add a .csslintrc file in the CSS folder (and duplicate it for each sub folder...) :
--ignore=ids,important
Otherwise, you can add a .sublimelinterrc file in your project root :
{
"linters": {
"csslint": {
"ignore": ["ids, important"]
}
}
}