I've got TSLint running nicely in my IDE and everything is great! However when I run npm run tslint it throws errors on some of my .svg and .scss files. It shouldn't be running on that and it doesn't run those in my IDE so what's up?
Here's my package.json script:
"scripts": {
"lint": "tslint ./src/*",
},
Can I edit that script to ignore .svg and .scss files?
You'll want to only lint .ts and .tsx files (or just .ts if you're not on React).
"scripts": {
"lint": "tslint ./src/**/*.ts ./src/**/*.tsx",
},
Related
I'm trying to get sass to run through the terminal and when I try, I get the error mentioned above. It seems that the installation of sass itself was successful because I can see it in my package.json file:
"devDependencies": {
"sass": "^1.51.0"
}
I have tried uninstalling/reinstalling sass, and restarting the client, but can't get the 'sass' keyword to work. I currently have my project located in a folder that github is also directed at so I can make pushing updates to github easier. Any help would be greatly appreciated.
Try npx sass, or create a new entry in the scripts section of your {package,yarn}.json file that calls sass.
"scripts": {
"build": "sass input.scss output.css",
}
Then, npm run build or yarn build, depending on which package manager you are using.
https://sass-lang.com/documentation/cli/dart-sass
I have the following folder structure:
theme
scss
hero.scss
header.scss
style.css
I'm trying to compile everything in the scss into style.css. I've followed this tutorial, but I believe this approach will compile several different css files (whereas I only want the one).
Even with the above approach, whenever I run npm run scss, it doesn't compile anything?
This is my package.json file:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch scss -o css"
},
"author": "",
"license": "ISC"
}
When running npm run watch-css or npm run scss, nothing happens? Where am I going wrong?
Your input directory and output directories are incorrect for the node-sass command. Assuming you've the following directory structure:
theme
scss
hero.scss
header.scss
style.css
package.json
You've created an npm run script called scss which is leveraging the node-sass library to compile your SASS into CSS. If you want to execute this run script you should type the following into your command line: npm run scss
Now when you type this command you're actually running the node-sass library with these parameters:
node-sass --watch scss -o css
In this command, you've specified that your Sass files exist in your scss directory and node-sass should look in this directory to compile your Sass into CSS. Once this is done your newly generated CSS is moved into your css directory.
However, the first issue is you don't have css directory for node-sass to put these compiled Sass files into. You can remedy this by either creating a css folder within your theme directory or modifying your output location parameter appropriately.
The other issue is your input directory location is incorrect for your Sass files. You've specified it as the scss directory however this location is relative to your package.json file and there is theme folder in-between said files. This should probably be changed to the following: theme/scss.
So in order to get it this command to work appropriately you need to change your input and output directories to point to the correct directory structure of your application.
Perhaps you could try changing your run script to the following and seeing if this helps (Assuming you don't want to create a css folder):
"scss": "node-sass --watch theme/scss -o theme"
then re-run your npm script like so:
npm run scss
Hopefully that helps!
how can I run pure gulp sass? I'd like to have installed just node modules and gulp and run some port of sass using watch. I'd like to avoid ruby version of sass. Is it possible? I run windows but i'd like the solution to be cross-platfom, which shouldn't be problem for node.
Thanks.
if you are looking for the seemlest and lightest solution without the needs of writing any gulp scripts, you can simply use node-sass and npm scripts.
For example in your package.json :
{
"scripts": {
"sass": "node-sass -w ./path/to/entry-point.scss ./path/to/build.css",
},
"devDependencies": {
"node-sass": "^4.5.3"
}
}
The -w is for the watch feature based on your entry parameter.
Then, simply :
$ npm run sass
// or
$ yarn sass
Check the CLI documentation for more informations.
I hope, it will help !
How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass
file:
sass --watch style.scss:style.css
But how to watch changes in whole directory/folder containing many sass files.
Simply use the command sass --watch <input folder>:<output folder>, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Expanding the answer by piouPiouM a little:
Output files will be created with the same names as input files except ending with .css.
<input folder> and <output folder> can be the same.
Both folders can be the present working directory, so the following is valid:
$ sass --watch .:.
Go to you terminal and get to you folder then wrote:
sass --watch .
this will watch all sass files and convert to css files with the same name.
also you can do it in this way:
sass --watch ~/user/youUser/workspace/project/styles/
I hope this can help you.
I ended up doing this without using Grunt or Sass-watch:
npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
if you are in your current folder then do the following to watch it.
F:\sass tutorial>sass --watch ./:./
Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated.
and as now (May 2018) if you install dart sass via npm , it does not support --watch command
What to do:
you need to install node-sass globaly , like:
npm install node-sass -g
and then restart the command line , then use this code:
node-sass --watch scss/styles.scss css/styles.css
to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.
and just in case you get an error like this at the first time that you save your .scss file:
{
"status": 3,
"message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
"formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}
what you need to do is save it again, it will work correctly!
According to the information, you can use the next command line:
sass --watch .
Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do
You can create one sass file which includes the rest of the files, and then just watch this file.
Alternately, look into Grunt and the very good grunt-contrib-compass plugin
You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:
npm i -g sass
then go to the project folder and type command below:
sass --watch $(pwd)/src/static
also you can wrap it in npm script in package.json, like
"scripts": {
"sass:watch": "sass --watch $(pwd)/src/static"
}
and run it by this command:
npm run sass:watch
I've been working on a way to speed up my workflow with SublimeText2 and Sass.
I was looking for a way to have ST2 compile my SASS when I save. In looking how to do this, I came across this package: https://github.com/bnlucas/SassBuilder
In execution, it is exactly what I wanted, but it does not compile SASS like I hoped (doesn't include partials support).
So after more research I found a build package that works for me:
{
"cmd": ["sass --watch 'index.scss':'index.css'", "--stop-on-error", "--no-cache"],
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
This is similar to running the following command in a cmd prompt with Ruby:
sass --watch index.scss:index.css --stop-on-error --no-cache
So I run this build system and it watches my index.scss just fine. Any changes made to any of the .scss files in that folder and it updates the .index.css file. All of the standard messages from Sass are displayed in ST's console.
My issue is I know that is not what ST's build systems are for. Ideally, they would be used to build with a set of tools multiple times in a coding session.
My question is: How can I use ST2 to launch a sass --watch and have it run in the background? Is there some sort of command/key binding I could set to run the build's cmd line ("cmd": ["sass --watch 'index.scss':'index.css'", "--stop-on-error", "--no-cache"])?
Check out the SublimeOnSaveBuild plugin, available through Package Control. Since you already have a working build system, all you need to do is configure the plugin to point to your .sublime-build file, modify the file endings if you want, and you should be all set.
Good luck!