I am trying to add new bower components in sage wp theme, only problem is that i can only add in manyaly in sass?
This is my bower.json
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben#benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"bootstrap-sass": "3.3.7",
"pushy": "1.0.0",
"fullpage.js": "2.9.2"
}
}
But in main.scss nothing is added?
// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
#import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
When you run the bower install command you must add the --save flag to the end of it for it to update everything.
Related
Fresh install of Vite and Tailwind results in tailwind.config.js, postcss.config.js and vite.config.js in the root folder of Laravel 9.
Is this expected? I want to organize these file into the existing resources/js folder. Where do I update references to these files to avoid breaking things?
Yes this is the default behaviour.
You can change the location of your vite.config.js to any location you want by using the --config flag in your package.json script:
"scripts": {
"dev": "vite --config custom/location/vite.config.js",
"build": "vite build --config custom/location/vite.config.js"
},
In the vite.config.js you can change the tailwind.config.js and remove the need for your postcss.config.js entirely like this:
...
css: {
postcss: {
plugins: [
require("tailwindcss")({
config: "custom/location/tailwind.config.js",
}),
require("autoprefixer"),
],
},
},
So here is the scenario, I have "main.scss" file inside "sass" folder and "style.css" file inside "css" folder. I have also already installed the "node-sass", "npm". When i try to compile the sass file into the css file through the terminal. It shows that it is successfully compiled but i can't see any updates on the css file. [
{
"name": "natours",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css"
},
"author": "anjan",
"license": "ISC",
"devDependencies": {
"node-sass": "^5.0.0"
}
}
As soon as i compile the file, i get the package-lock.json file on my folder. I am also assuming this might be causing the update to stop on css file.
Can anyone help?
Try this:
C:\Users\HP\Desktop\advanced-css-course-master\Natours\starter> sass --watch sass/main.scss:css/style.css
I'm trying to create a task to run a sass compilation for the current file but I'm not able to set the output css folder and filename.
The structure of my sass and css files are:
myfolder\css\myfile.css
myfolder\scss\myfile.scss
My current task is:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Compile SCSS",
"type": "shell",
"group": "build",
"command": "sass --load-path ${workspaceFolder}\\vendor\\scss --load-path ${workspaceFolder}\\base\\scss --no-cache --sourcemap=none --update ../scss/${fileBasename}:${fileDirname}/../css/${fileBasenameNoExtension}.css"
}
]
}
the problem is the latest section where I need to put my sass folder/file : my css folder/file
What's the approach here?
I'm trying to add Materialize to this modified sage wordpress theme it is sage with bootstrap removed along with stylus and lostgrid added. [That link is repo without materialize that I'm attempting to add Materialize to.]
I've added these changes yet the materializecss and js don't seem to be available.
"dependencies": {
"materialize": "^0.97.7"
},
"overrides": {
"materialize": {
"main": [
"./css/materialize.css",
"./js/materialize.js"
]
}
}
You can see the commit here. [This is a repo with materialize added to the bower.json.]
What more has to be done to add a bower package to a sage theme or what am I doing wrong?
According to this page / comment the only step required is what I have done in bower.json.
I'm not seeing any Bower libraries added to your bower.json in the repo you linked to, so step 1 is to enter your theme dir and $ bower install materialize --save. Note that I performed this on a fresh install of Sage after I removed all Bower packages and overrides (I also commented all the #import directives in main.scss that come after the wiredep block to safely remove any remnants of Bootstrap's SCSS variables). If you decide to skip to the end of my answer and just use my bower.json file as your own then you'll just need to enter your theme dir and run $ bower install.
After installing Materialize via Bower you should be able to run gulp and see evidence of Materialize, but there are a few issues we need to resolve:
The main property of the Materialize project points to a CSS file and a minified JS file, both of these are not ideal and we will override them.
That first issue above also means when you load your site after running gulp you'll see console 404s because we need to override the fonts too.
This is the final bower.json file I ended up with:
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben#benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"materialize": "^0.97.7"
},
"overrides": {
"materialize": {
"main": [
"./dist/js/materialize.js",
"./sass/materialize.scss",
"./fonts/**/*"
]
}
}
}
You will also need to add this to your main.scss file before the wiredep block:
$roboto-font-path: "../fonts/";
The overrides can be improved to use just the individual SCSS components you need instead of all of them. The same goes for the JS source (although the JS files definitely need to be included in a specific order, there are a lot of them and I haven't seen a list anywhere of how they need to be ordered).
EDIT
If you want to include the JS files individually then I've figured out the order, just beware of dependencies if you remove anything and test thoroughly.
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben#benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"materialize": "^0.97.7"
},
"overrides": {
"materialize": {
"main": [
"./js/initial.js",
"./js/jquery.easing.1.3.js",
"./js/animation.js",
"./js/velocity.min.js",
"./js/hammer.min.js",
"./js/jquery.hammer.js",
"./js/global.js",
"./js/collapsible.js",
"./js/dropdown.js",
"./js/leanModal.js",
"./js/materialbox.js",
"./js/parallax.js",
"./js/tabs.js",
"./js/tooltip.js",
"./js/waves.js",
"./js/toasts.js",
"./js/sideNav.js",
"./js/scrollspy.js",
"./js/forms.js",
"./js/slider.js",
"./js/cards.js",
"./js/chips.js",
"./js/pushpin.js",
"./js/buttons.js",
"./js/transitions.js",
"./js/scrollFire.js",
"./js/date_picker/picker.js",
"./js/date_picker/picker.date.js",
"./js/character_counter.js",
"./js/carousel.js",
"./sass/materialize.scss",
"./fonts/**/*"
]
}
}
}
I would like to use Angular 2 for the front end of an existing ASP.NET 4 app, i.e. not MVC 6/ASP.NET CORE, and I'd rather not use node as we are already using nuget as our package manager. Does anyone know of any resources that will guide me through this?
To answer my original question, this is how we have managed to get Angular 2 up and running with .net 4.5.1 (we did end up having to use npm).
In the header of _Layout.cshtml, imported the Angular 2 files from the cdn and configured SystemJs.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../../node_modules/systemjs/dist/system.src.js"></script>
<script src="../../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../../node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
'my-app': {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('my-app/main')
.then(null, console.error.bind(console));
</script>
Added package.json and tsconfig.json to the route of the project
packages.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.9",
"systemjs": "0.19.24",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"typescript": "^1.8.7",
"typings": "^0.7.5"
}
}
tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
If you have node and npm installed on your machine, it should automatically download the npm modules you need, and save them in the node_modules folder. You should now be ready to set up an Angular 2 application, we used the this to get started.
They've updated the Angular site with a non-Core scenario:
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
I have created a startup project for Angular 2.0 which just went live at https://github.com/chanoto89/angular2-startup with ASP.NET 4.5.2.
I used the http://blogs.msmvps.com/deborahk/angular-2-getting-started-with-a-visual-studio-2015-asp-net-4-x-project/ outline, but took advantage of using MVC as well as gulp to move the needed dependencies inside the project rather than using the entire node_modules installed by npm.
I followed https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html and ran into an issue, this is just to help if someone runs into same.
For some reason I wasn't getting restore packages option on package.json on a new project, restarting the visual studio 2015 profession brought the option again.
And I had to copy systemjs.config.js in projects folder else it was stuck on Loading ... , developer bar showed 404 for systemjs.config.js and copying it brought 'My First Angular Help'.