I'm trying to setup a build flow in a Visual Studio environment (13, on Windows 7) using browserify, and I am getting some strange behaviour trying to get browserify to work. I'm new to the environment as well as the technology, so I'm fairly confused here.
For the purposes of this test, my file structure is the same as the Basic API example found here: http://viget.com/extend/gulp-browserify-starter-faq I installed browserify using npm. It is running version 5.12.0
If I place app.js and hideElement.js in a simple directory, such as C:\Temp, and run
c:\Temp> browserify app.js
everything works fine. It bundles up all three of the required files, and spits them out. But if I run the browserify command from my project directory (C:\Users\\documents\visual studio 2013\Projects\ExcelConverter\ExcelConverterWeb), the following error spits out at me:
C:\Users\<name.redacted>\Documents\Visual Studio 2013\Projects\ExcelConverter\ExcelConverterWeb>browserify app.js
Error: SyntaxError: Unexpected token ? while parsing json file package.json
at fns(C:\Users\<name.redacted>\AppData\Roaming\npm\node_modules\browserify\node_modules\module-deps\index.js:402:30)
at fs.js:271:14
at Object.oncomplete (fs.js:107:15)
I've looked at the file in question, and I can't make heads or tails of it. So, what's going on here? How come browserify runs fine when I execute it from one directory, but not from the other? I appear to be using the same executable.
(I'm trying to use browserify as part of a gulp-based build process, but seeing as the errors produced by gulp are basically the same as those I see when I run from the command line)
I have run into "Unexpected token ?" problem. Changing package.json encoding type to 'ANSI' helped solving it. Most of the text editors have that option when "Save As" change Encoding option, then hit "Save"
See if that work for you.
Related
When I build the NestJS application inside a docker container with docker-compose, it builds without any errors. But the VS-code file explorer is showing all my files have errors with missing modules. Please refer to screen shots as below:
Please help.
Since you haven't run npm i or the yarn equivalent, node modules folder is not populated with the actual node packages/files.
Keep in mind that as #omidh said in his comment, when you run the docker command, you make an isolate environment/container with your code and all node_modules installed correctly. That means that your code is copied inside the container, then inside the container the command npm install is being run and your code is compiled/run eventually.
So that is the reason that your container runs without any error and your editor is showing errors.
I'm trying to change the color theme of bootstrap with sass. I'm running the command npm run watch and when I save it does in prompt me with:
Laravel Mix Build Successful
When I view my page I do not see the changes. (I've cleared cache and hard refreshed as well as closed broswer/new browser) To do this I'm updating "warning" to be a purplish color, but bg-warning is not changing to a purplish background (I believe this is what is intended).
I'm using Laravel framework 5.5
Here is my webpack.mix.js
Here is my app.scss
Here is my base/_colors.scss
I've tried throwing my base/_colors.scss code straight into the app.scss file with no luck either. (Even though it says it builds properly.)
I've also tried running the following with no success:
npm run dev
npm run production
Edit: the other possibility is this is not how sass works with bootstrap. Do I need to actually assign things the color of $warning or does this look for all instances of $warning (.alert-warning, .bg-warning, etc.) and replace?
Try running npm hot, that helped me:
npm run hot
I would do following further steps:
check if the folder base really exists
create a a new css file which in not inside a folder (base) just to check that that does not cause an error
Write simple css in your _colors.css and check if that works
add an !important statement after your color declaration to check if it does not have to do anything relating overriding the styling
Can anyone please help explain this? I am new at using Sass. But I cant understand why people use compiler for sass files when they can be run through terminal.
I actually had the same question some time ago when I was learning SASS.
I kept wondering why most tutorials involved using GRUNT / GULP or some kind of task runner when there where sass proprietary commands even for live-watching your files with a command such as:
sass --watch app/sass:public/stylesheets
I will quote myself here in the question (that no one answered) just to share my experience with SASS compiling:
Grunt: using grunt-contrib-sass - Everything has worked smoothly; I chose this one over grunt-sass for no particular reason, but I've read that the latter uses libsass(c++) which is faster than the traditional ruby Sass.
Gulp: using gulp:sass - I often encounter an error when watching
files, it doesn´t find some partials, but if you save again,
everything is fine (this is addressed in their common issues -this
solution hasn't worked for me though), also it doesn't generate sass
maps as a default you have to use gulp-sourcemaps on top.
Straight from Console: no task runners - Works fine so far, generates
sourcemaps, and lets you know where there's an error, just like with
Grunt and Gulp.
So after working on different projects using SASS I'd say the reasons are:
Tutorials popularized the use of task runners when using SASS in its early times
In a project, you rarely use SASS just by itself, you most likely want to run other tasks, so it makes sense to add your SASS task to the flow, which saves time and makes sense.
It's easier to run a simple command such as gulp sass or just gulp to run the default gulp task (that should include the sass task) than to remember a long command in which you have to put the paths over and over again.
After a while I realized that you can use NPM scripts in your package.json to run the SASS command line tools like so:
"scripts": {
"sass": "sass --watch app/sass:public/stylesheets --style compressed"
},
And then run it from the command line: npm run sass
the above requires no configuration and you don't have to remember the whole command by heart.
To conclude, there is nothing wrong in using the CMD SASS without other compilers/task runners, just use whatever you feel most comfortable with.
I've got a funny error.
My sass files are located on a Dropbox folder. I edit them locally on my dev pc, and then they're synced via Dropbox to the server. On the server I have a CentOS installed with CLI Dropbox service.
I have an app.scss file and a _settings.scss file included from app.scss. If I edit _settings.scss, the following error is thrown:
error app.scss (Line 2: File to import not found or unreadable: settings.
Load paths:
/www/psmb.dev/web/typo3conf/ext/speciality/Resources/Public/foundation/sass
/usr/local/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/usr/local/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
/usr/local/lib/ruby/gems/1.9.1/gems/zurb-foundation-4.3.1/scss
Compass::SpriteImporter)
If I then change something in app.scss, it's compiled without error.
Now the funny thing: if I edit _settings.scss locally on the server, or via ssh, then no error is thrown!
What's up?
After some suggestion and Dmitri's test verification, we came to the conclusion that most likely compass watch caught the file change "too early" while dropbox process is in the midst of making complete sync of the file. The file sync is probably implemented by 2 or more successive file update steps.
Potentially the problem can be resolved if compass watch's compile trigger can be delayed somewhat. For now Dmitri decided to use ftpsync instead.
Make sure that you are using linux line endings in your SASS files, as that is probably making it fail to compile.
When you edit it in windows, it's probably setting it to the windows line ending.
When you then edit it in CentOS, it's probably settings them to the unix line ending.
I'm trying to learn SASS and so I have installed ruby through RubyInstaller and installed the sass gem.
I am able to type out my sass and have the compiler watch the file and write to another just fine, but every time I save my file I get
The system cannot find the path specified
C:\Program Files (x86)\Notepad++)
However everything works as intended, the styles are updated and compiled just fine, but it's quite annoying hitting ctrl+s and having that error keep popping up when it doesn't seem to be affecting anything.
How do I go about troubleshooting this?
Here is a solution for anyone else having the same trouble on notepad++:
Sass-Auto-Compile
For using the Sass-Auto-Compile plugin, you first need to install
another plugin called jN. jN is a plugin for Notepad++, which executes
your JavaScript-scripts in the Notepad++ environment, meaning you can
write plugins in JavaScript
this is the link :
http://www.ninjagame.de/blogContent/Sass-Auto-Compile.js
To get the auto-compiling working, you need to do two things:
Copy this script into the directory “Notepad++/plugins/jN/includes/” .
Now edit the script and change the variable pathToRubyBinDir to the
right value. Mine is: “C:/Program Files/Ruby193/bin/” .
OPTIONAL: There are two more configuration variables:
debugMode: can be true or false. In case of true, you will see the
command line, which calls the compiling process. You can see compiling
errors in this command line window.
outputStyle: this determines, how your .css is going to look like.
(compressed, extended…). See the comments above this variable for more
information.
This guide is copied and pasted from http://deekaysblog.wordpress.com