What is the best way to use SASS with Client side blazor. I looked into the this
https://github.com/madskristensen/WebCompiler
But it looks like works only with Visual Studio. I am using Visual Studio Code.
As mentioned in the MS docs, you can use the Delegate.SassBuilder package to help you compile sass/scss files to css.
It works pretty well, and very easy to install with no configuration required.
NOTE
For newer Sass build requirements - I've created this LibSassBuilder
I recommend using sass directly from the command line.* Note that:
Dart Sass is the primary implementation of Sass
and it can be installed and used globally as a CLI tool, no npm project or pipeline required is the key.
You can install sass via choco:
choco install sass
Or with with npm:
npm install -g sass
Then you can right click on wwwroot and select Open in terminal and build and watch in native ways enabled by sass. To watch all see the following for instance:
sass --watch .:.
(A bit begrudgingly, but other solutions, like building on every build, has big downsides. Like it building sass resources on every build: That's really wasteful when you've not been messing with your styles ... Or take the fact, in my case right now, that neither the WebCompiler extension nor LibSassBuilder as mentioned above seem to work on this preview version of Visual Studio.)
Related
I have just started learning Vue.js. The author is using npm install -g vue-cli but it did not work with me because I got stuck with technical issues and I tried many solutions to fix it but I couldn't.
So I want to follow up with the author but using npm install -g #vue/cli. So Do you think I it will be easy to follow up with him? I mean are these different versions use different syntax?
The vue-cli package seems to be the old cli. The main difference between this version and Vue CLI 3 is that the webpack configuration used to be visible in the project as a build directory. To make changes to the build process you used to have to modify files within this folder. In Vue CLI 3 this has been moved to a helper that consumes a configuration file vue.config.js in the project. The structure of files has been slightly altered in this version of the CLI. Both work with Vue 2.x, so the way you write .vue files has not changed in any way.
Overall you should have little trouble following the tutorial, unless you are going to make changes to the build process. In that case, simply consult the official documentation or find a tutorial that is specifically for Vue CLI 3.
According to the docs, Titanium now has support to install npm packages: http://docs.appcelerator.com/platform/latest/#!/guide/Node.js_Support
However, upon reading it, I am very confused as to where to actually put my node_modules directory. There is some mention in the docs about a Resources directory, however, for Alloy this is supposed to be left empty, as it is frequently overwritten by the compiler.
So my question is, where do I put my node_modules and how do I reference it.
In Alloy project you are supposed to run npm install inside the app folder. But according to this bug JIRA Ticket modules that use core-modules won't work correctly. So you have to try if you module works.
Another explanation: https://stackoverflow.com/a/45041737/5193915
From experimentation, it seems like you can do npm install in the app/lib/ so your package are in app/lib/node_modules. This does NOT work on the app/ directory.
Note that if you use tishadow, you will also need to install the npm packages there as well in the Resources/ directory (as they still do not use the Alloy framework).
I am new to the development based on java-script frameworks. I want to understand gulp, npm. Somewhere, I read that these are open source client side development tool but I could not get more insight on this. Please help!
It is a task runner, written in JavaScript to be run in a nodeJs environment. You need a package manager like npm to install it. Npm comes with nodejs.
An Introduction to Gulp.js
It is an application doing things like the following, instead of you. You need only to code once the instructions and run it.
Compressing new and modified images; compiling Sass to CSS code; code linting and validation; concatenating and minifying CSS and JavaScript files; deploying files to development, staging and production servers.
I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?
If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.
If you follow JetBrains' Getting Started with Node.js in WebStorm instructions, node-express specific code is highlighted correctly. However if you create your own simple node-express project, e.g. using node-express' Guide, then express specific functions such as app.get() are underlined and marked with the following warning:
Unresolved function or method get()
This happens even if you enable the following libraries under Settings\JavaScript\Libraries:
Node.js Globals
Node.js v0.10.31 Core Modules
express-DefinitelyTyped (which you need to download)
How can I configure WebStorm to resolve node-express functions such as app.get()?
Instead of express definitelyTyped, use express types in your project:
npm install --save-dev #types/express
Alternatively, for yarn users:
yarn add --dev #types/express
This worked great for me.
TL;DR:
you go to Settings/Preferences --> Languages and Frameworks --> JavaScript --> Libraries, click the Download button on the right, then select "express" (or any other library you need) and click Download and Install.
Enabling express-DefinitelyTyped typescript library for Express project does work for me - app.get() is successfully resolved. Adding typescript stubs is the only possible workaround, as WebStorm can't understand the way express is defined - see https://youtrack.jetbrains.com/issue/WEB-6667#comment=27-470393
If adding typescript stubs doesn't work for you, please try invalidating caches. If this doesn't help, I'd suggest contacting jetbrains support, providing a sample project