How can i import external css in angular 7 - angular7

How can i import bootstrap.css,jquery and JavaScript in my angular components and how can convert html webpage to angular webpage
Style.css
// Globally declaration for styles
#import url("./assets/css/bootstrap.css");

You can install bootstrap using npm.
npm install bootstrap --save
and then set the path in angular.json file as
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
]
This will do the work.

Related

SyntaxError: Cannot use import statement outside a module when run gulp server / gulp watch in my ruby project

On my ruby project when I try to run gulp (gulp server, gulp watch) I have the following error :
Users/workspace/website2019/gulpfile.babel.js:1
import del from 'del';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I don't get how can I fix it, if someone could help me please,
you use babel transpilation with gulp because of the file gulpfile.babel.js For this reason you need to install babel. according to the documentation you need #babel/register and #babel/preset-env for transpiling your import syntax.
So run the following command in your project folder
npm install --save-dev #babel/core #babel/register
Afterwards create the babel configuration file .babelrc in the root folder and add the following lines to it
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
make sure you have this line in package.json
"type": "module"

How to use SaSS for an ASP.NET MVC application?

Problem and question
I've always had problems with CSS code, so now I always use SaSS code. But my question is: how can I use SaSS for an ASP.NET MVC application?
I've tried
I've tried tried to use a Gulp task for this. I've used these commands
npm init
npm install --save gulp
npm install --save gulp-sass
Here is my package.json file:
{
"name": "markeonline",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Hein Pauwelyn",
"license": "ISC",
"dependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0"
}
}
Here is the gulpfile.js
var gulp = require("gulp"),
sass = require("gulp-sass");
// other content removed
gulp.task("sass", function () {
return gulp.src('./**/*.scss')
.pipe(sass())
.pipe(gulp.dest(project.webroot + './MarkeOnline.Website/Content/css'));
});
Here is my project structure:
This code gives me the following error if I use the command below:
gulp sass
ReferenceError: project is not defined
[17:50:58] ReferenceError: project is not defined
at Gulp.<anonymous> (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\gulpfile.js:9:23)
at module.exports (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:134:8)
at C:\Users\hein_\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:592:11)
at run (bootstrap_node.js:394:7)
events.js:160
throw er; // Unhandled 'error' event
^
Error: node_modules\node-sass\test\fixtures\depth-first\_vars.scss
Error: Undefined variable: "$import-counter".
on line 1 of node_modules/node-sass/test/fixtures/depth-first/_vars.scss
>> $import_counter: $import_counter + 1;
-----------------^
at options.error (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\node-sass\lib\index.js:291:26)
Try Web Compiler plugin instead this is what I use to compile SCSS in MVC.
A Visual Studio extension that compiles LESS, Sass, JSX, ES6 and CoffeeScript files.
You can use another way easier I think.
Step 1
Go with this steps
in your NuGet Manager.
Add Microsoft.AspNet.Web.Optimization
Add BundleTransformer.SassAndScss
Add LibSassHost.Native.win-x64 if you use system 64 bit.
LibSassHost.Native.win-x86
Step2
In BundleConfig.cs add this code in RegisterBundles methode.
var nullBulider = new NullBuilder();
var nullOrderer = new NullOrderer();
BundleResolver.Current = new CustomBundleResolver();
var commonStyleBundle = new CustomStyleBundle("~/Bundle/sass");
commonStyleBundle.Include("~/css/main.scss");
commonStyleBundle.Orderer = nullOrderer;
bundles.Add(commonStyleBundle);
Step 3
Add CSS folder in your project and add main.scss file sheet inside.
Step 4
In your view, you need to use System.Web.Optimization.
#using System.Web.Optimization
And link your style sheet
#Styles.Render("~/Bundle/sass").
Step 5
In Global.asax we need to add this line in Application_Start().
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
Or maybe you will find it already in your class if you use MVC templet.
And that is it your main.scss its work.
This is how you can add Sass to your Mvc app:
Download WebCompiler:
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler&ssr=false#qna
Double click on the Vsix file to install it.
Right click on solution, Manage Nuget Packages
Download bootstrap.sass package (version 4 or above)
Right click on the bootstrap.scss file under Content folder you need and select Web Compiler - Compile File
The bootstrap.css file will be generated.
You can select any scss file to compile.
You can see the configuration (list of files to be compiled) in the compilerconfig.json file in the root folder.
Add the css file to the bundle.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap/main.css",
"~/Content/site.css"));
If you need to customize bootstrap, add a main.scss file in the same folder as bootstrap.scss. Then compile it using Web Compiler.
main.scss:
/* import the necessary Bootstrap files */
#import "_functions.scss";
#import "_variables.scss";
/* make changes to the !default Bootstrap variables */
$body-color: green;
/* finally, import Bootstrap to set the changes! */
#import "bootstrap.scss";
This example includes all the files, but make sure you only add the files you need to make the css smaller.

How to disable CSS imports in JSPM / SystemJS

My issue is JSPM / SystemJS manually inserting CSS dependencies (namely Angular Material's CSS) when I have a different pipeline for those (Gulp + SASS).
How can I tell JSPM to not import CSS files or interpret CSS dependencies in any way? I found only this discussion - https://github.com/jspm/jspm-cli/issues/791 - but it did not help me at all.
Seems that JSPM prefers local package overrides rather than turning off CSS features completely.
The culprit of my original issue is Angular Material's package.json, which contains the following JSPM configuration:
"shim": {
"angular-material": {
"deps": [ "./angular-material.css!" ]
}
}
So what really solved my issue was to override that configuration:
jspm install angular-material -o '{ shim: {} }'

How to override "ignore" part of bower.json file of dependency?

I would like to use https://github.com/MrRio/jsPDF in my ember project.
I wanted to import jsPDF as dependency, therefore I started this way:
bower install git#github.com:MrRio/jsPDF.git --save
Unfortunately, I cannot install files from plugins directory, because "plugins/*" directory is ignored in bower.json file.
I have tried overriding it this way, but without success.
"overrides": {
"jspdf": {
"ignore": [
"**/.*",
"libs",
"CNAME",
"jspdf.js",
"examples/jspdf.PLUGINTEMPLATE.js",
"todo.txt",
"wscript.py",
"build.sh",
"test",
"tools"
]
}
}
Could you please help me?
I just added a jsPDF plugins package to bower.
You can add all the plugins via
bower install jsPDF-plugins --save

Linter warnings when importing packages within dart libs

I am working on a big Dart project that includes a web frontend as well as a couple of custom libs. We are using the recommended folder structure as described here.
my_app/
lib/
my_library1/
example/
lib/
my_library1.dart
my_library1.html
pubspec.yaml
...
web/
pubspec.yaml
And we have several libraries in our lib folder that we all import in our main pubspec.yaml like this:
dependencies:
my_library1:
path: lib/my_library1
This is all working just fine, but when I use pub build to generate a JS build, I get a ton of Linter warnings about how to import packages correctly for each lib we have.
For example, the my_library1 lib has a polymer import in the my_library1.html file that looks like this:
<link rel="import" href="../../packages/polymer/polymer.html">
The warning for this would be:
[Warning from polymer (Linter) on my_app|lib/my_library1/lib/my_library1.html]:
line 1, column 1 of lib\my_library1\lib\my_library1.html: Invalid URL to reach to another package: ../../packages/polymer/polymer.html. Path reaching to other packages must first reach up all the way to the packages directory. For example, try changing the URL to: ../../../../packages/polymer/polymer.html. See http://goo.gl/5HPeuP#code_transformers_2 for details.
<link rel="import" href="../../packages/polymer/polymer.html">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Now, if I change that line to what they suggest (../../../../packages/polymer/polymer.html), I get this error instead:
[Warning from polymer (Linter) on my_library1|lib/my_library1.html]:
line 1, column 1 of lib\my_library1.html: Invalid URL to reach to another package: ../../../../packages/polymer/polymer.html. Path reaching to other packages must first reach up all the way to the packages directory. For example, try changing the URL to: ../../packages/polymer/polymer.html. See http://goo.gl/5HPeuP#code_transformers_2 for details.
<link rel="import" href="../../../../packages/polymer/polymer.html">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
So no matter how I do it, it's wrong. Interestingly, the source file for the warning changes from my_library1|lib\my_library1.html to my_app|lib\my_library1\lib\my_library1.html.
Does this make sense to anyone?
btw, I have been reading up on this stuff on various Dart sites (#1, #2, #3), but to no avail.
I am using Dart 1.7.2 (STABLE) and polymer 0.15.3+2
Your package should not contain more than one pubspec.yaml file. The lib/ folder should have only dart files and other assets, such as html, js and css files. For example, you can organize your project as follow:
my_app/
lib/
my_library1/
my_library1.dart
my_library1.html
...
web/
pubspec.yaml //you do not need to include my_library1 as a dependency here
Furthermore, if you want to use my_library1 in others packages, you need to move it to its own package:
my_library1/
example/
lib/
my_library1.dart
my_library1.html
pubspec.yaml
my_app/
lib/
...
web/
pubspec.yaml //you need to include my_library1 as a dependency here
In either case, my_library1.html can use the following import:
<link rel="import" href="../../packages/polymer/polymer.html">

Resources