I have a bunch of seperated .scss partials and components, all imported to my main.scss file. Using npm's (ver. 9.2) sass (ver. 1.56) I can compile the entire project no problem with sass ./assets/scss/main.scss ./assets/css/style.css command ran as an npm script.
The same command with the --watch flag should keep track of changes in scss files and recompile accordingly. However despite displaying the right message:
> project#1.0.0 sass
> sass --watch ./assets/scss/main.scss ./assets/css/style.css
Sass is watching for changes. Press Ctrl-C to stop.
the compiler doesn't notice any changes done to the scss files, and that includes the target main.scss.
I use WebStorm IDE on Windows 10 with the WSL 2 Ubuntu 22.04.1 for Node and npm. It seems this issue is unique to my setup as my collaborators in this project have sass --watch working just fine.
What could I do to trace the source of the issue?
Issues with SASS watch pop up a lot with a bit of googling but they mostly seem to be related to the (now deprecated) ruby implementation of SASS and the proposed fixes are as well, e.g.:
sass --watch not updating after initial launch (sass 3.1.16)
which is why I decided to ask yet another question about his issue, hopefully the different circumstances provide this post with enough utility to not be closed on sight.
I turns out the issue is entirely related to WSL, or more specifically WSL 2 (source). In spirit of passing on The Wisdom of The Ancients I decided to submit an answer with my workaround, even though I don't expect the issue will be solved sooner or later by the WSL team since even their own guides recommend using a Hot Reload frameworks through WSL.
So anyway my solution was to create a fresh, lean dedicated WSL 1 Ubuntu distribution specifically for Webstorm.
Download the current Ubuntu LTS from https://cloud-images.ubuntu.com/wsl (e.g. here 23.04 LTS):
curl https://cloud-images.ubuntu.com/wsl/lunar/current/ubuntu-lunar-wsl-arm64-wsl.rootfs.tar.gz
Import it as a new WSL distribution (in Powershell, but WSL works just as well):
wsl --import UbuntuWEBSTORM c:\WSLstorage\UbuntuWEBSTORM ubuntu-lunar-wsl-amd64.rootfs.tar.hz
Run wsl --set-version UbuntuWEBSTORM 1 to change this distro to WSL 1.
Perform any initialization and customization I need for that particular distro (e.g. installing nvm, nodejs and npm come to mind).
Setting up in Webstorm's Settings>Tools>Terminal the path for the Terminal as:
C:\Windows\System32\wsl.exe -d UbuntuWEBSTORM
Works great with SASS compiler, React or any other Hot Reload environment I used it with.
Related
I've been using the command line for some time now, but I'm still not sure what exactly happens when I do certain things - and I'm not sure what to google for help.
When I'm working with Anaconda and Python, I found the environments I created in C:\Users\<User>\Anaconda3\envs. And every python package I install in an environment seems to go there. Great!
But how does this work outside of Anaconda/Python? For example, I installed the vue CLI via npm install -g #vue/cli. What exactly happens when I do this; or more precicely, where are files saved?
During the creation of a new vue project, a readme.md is created as well. It states that users should simply npm install to setup the project. It seems that this command installs all packages stated in the package.json. I would like to try out if this command works for new users, but I already (obviously) have everything installed. Can I create some kind of environment (like I do with Anaconda for Python) to accomplish this?
Thanks a lot for your answers!
Problem Summary
So I'm trying to launch a new Gridsome project for local development. I've toyed with Gridsome in the past and had a great experience, so I decided to give it another shot.
This time around; however, when I run the gridsome create command, the system creates a new Gridsome site directory as expected but returns the following error message:
The instructions in this error message say to enter the newly-created site directory and run gridsome develop to start local development. However, after running cd my-gridsome-site and subsequently running gridsome develop, I then receive this error:
So far, I've tried running npm install --save from the site directory as well as yarn install, both to no avail. Thinking that this was possibly tied to my terminal, I switched from using the Zsh terminal to using the Bash terminal. This also did not work.
I'm at a loss here and could really use a hand.
Thank you for helping,
David
This seems to be an environment error. Gridsome requires Node.js (v8.3+) and recommends Yarn.
Make sure your Node.js version is v8.3+ and use only one package manager like Yarn.
to check node version: node -v
I had this same issue, but I resolved it after installing yarn and running the project with yarn instead of NPM. So you should try using yarn it will help,
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.)
I recently got confused and almost installed a tool via brew install when in fact it was an npm package and all I needed to do was npm install -g.
So these tools are strangely similar yet obviously different.
What's the difference in crystal clarity?
NPM exists to resolve dependencies for application code, on a per app basis, allowing an app to be self-contained and portable. This means that (in its default mode of operation) it will install the same stuff many times, uniquely, repeatedly, and separately, for every app on your system that needs the same package, inside of that apps own directory and isolated from everything else.
Homebrew is not like this. The reason is it serves the system itself, not individual apps, so is more comparable to just the npm -g part of npm.
There is one extra bit to understand about homebrew, though - some system packages have specific dependencies and could even have conflicts. This means that for the global installs that homebrew provides, it also has to solve some nesting and conflict issues. It's a kind of magic?
Environment:
Windows 7 Pro 64 bit.
Apache 2.2.25
ActivePerl 5.18.2 Build 1802 (64 bit)
Bugzilla 4.4.5 (extracted)
Okay, I have followed step-by-step instructions as indicated here: https://wiki.mozilla.org/Bugzilla:Win32Install
There's 1 major issue that I've researched all day and cannot find a solution. It's the "ppm install DBD-mysql" issue. There is no "DBD-mysql". When I use the ppm gui, there's a DBD-mysqlpp , but that's not what's needed.
When I run in a command window: C:\bugzilla\checksetup.pl , I get the only error:
Checking for DBD-mysql (v4.001) not found
For MySQL, Bugzilla requires that perl's DBD::mysql 4.001 or later be
installed. To install this module, run the following command (as Administrator):
ppm install DBD-mysql
Well, I found DBD-mysql 4.028 here: http://search.cpan.org/~capttofu/DBD-mysql-4.028
However, trying to get the perl ppm (perl package manager) gui to see it, but even pointing the link in the gui preferences it still wouldn't see it to download and install it. This sucks.
So, I manually downloaded it and saw some crap "makefile.pl" file. Look, I use WINDOWS not LINUX, so naturally I rolled my eyes but it quickly became clear that I HAD to do this. Well, after about an hour of screwing around I was finally able to make a mysql_config.pl file. Oh wow, great.... now what!? What do I do next with this??
Not only is this part aggravating, but now I need mod_perl in my Apache. Okay, so I look in my .conf file where I can uncomment:
#LoadModule perl_module modules/mod_perl.so
Guess what... it's not there. (facepalm)
So I researched and downloaded mod_perl 2.0.8 from: http://perl.apache.org/download/index.html
Heh, ... guess what... another damn "makefile" file!! Let me tell you, this is as bad as being a MAC user in the late 90's and trying to find a program to be compatible.
So, my 2 main questions are these:
How do I get DBD-mysql properly installed
How do I get the mod_perl properly installed
I have been working 12 hours non-stop trying to get Bugzilla installed. At this point, I'm so frustrated beyond believe I'm ready to scrap this and install flyspray or some other php/mysql bug tracking system.
For future reference in case anyone stumbles upon this item:
Most Perl modules have installation instructions, either in their .pod documentation or in a README or INSTALL file.
Most Perl modules follow a similar installation mechanism: create a makefile; run make; make test (which runs a set of tests, unsurprisingly), and then install the module. From the commandline, this looks like the following:
$ perl Makefile.PL
$ make
$ make test
$ make install
Both mod_perl and DBD::mysql have platform-specific installation information in the release notes.
DBD-mysql is a package that you can find in ActiveState Package Repository. That means that it should be installed at the time you installed ActivePerl, making your question really strange. I know it because I just did it yesterday, and everything worked just fine.
A possible solution for this issue is:
Open the command line in Windows;
Type ppm, press enter and wait. A GUI for the Perl Package Manager will be displayed;
Search for DBD-mysql. If you find it, schedule it for installation by right-clicking it and clicking on Install DBD-mysql 4.022;
Although, you probably won't find it. If you don't, press Ctrl+P and, in the dialog that appears, select the Repositories tab. Add a new repository:
Name: ActiveState-Package-Repository
Location: http://ppm4.activestate.com/MSWin32-x64/5.16/1604/package.xml
It will update the list of packages. Repeat steps 1 to 3.
If you prefer doing it by the command line, these are the instructions:
ppm repo add ActiveState-Package-Repository http://ppm4.activestate.com/MSWin32-x64/5.16/1604/package.xml
ppm install DBD-mysql