I want to try parceljs for minifying and bundling.
I have installed the parcel-bundler with npm, and i tried creating a index.js, main.js and main.css for testing.
main.css
.main
{
color: red;
}
main.js
import classes from './main.css';
export default () => {
console.log(classes);
};
index.js
import main from './main';
main();
In my layout.cshtml file i have included the index.js file, but this is where im stuck.
I know that i can run parcel from powershell\cmd, and it says the server is running on port 1234. However, i want to use dotnet run.
When running dotnet run like i normally do i get "Unexpected token" from the index.js file. I guess parcel does not run when starting dotnet run.
I'm having the same problem. If you just want to run Parcel without the server you can do parcel watch index.js but you'll have to have this running at the same time as dotnet to get Hot Module Reloading. What we really need is the Parcel equivalent of WebpackDevMiddleware.
Another option is to use something like Concurrently to run both commands at the same time. You could then setup an NPM script like this:
"scripts": {
"dev": "concurrently \"dotnet run\" \"parcel watch index.js\""
}
and run:
npm run dev
Related
I have project in made Laravel. In scss file I've made changes (font-size and color) but I don't know how the css file is generated. Because I can't see changes in css file.
In Laravel documentation I see that css is generated in this way: mix.sass('resources/sass/app.scss', 'public/css');
but I don't know how to run this command.
If you have installed node and npm in your machine and already run below command
npm install
Then you need to follow two step.
Step-1:In your project root folder,there is file name wbpack.mix.js or your/project/dir/wbpack.mix.js and you may edit this file as you want
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Step-2: After editing this file, you need to run this command
npm run dev
with this command compiling would be start and after ending,you may reload your browser to see the changes. cntrl+F5 for fresh loading.
Otherwise download node & install it,npm will came over with node. And run first command and follow those two step.
Tip: if you changes your scss file or js constanly for the time being, you may run this command
npm run watch
Because,if you have changes in your scss and js file,you need to run over and over npm run dev to recompile your code.But if you have run npm run watch, it will automatically recompile,whenever you hit cntrl+s.
Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
npm install
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file.
npm run dev
In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like
import Header from '../components/Header';
I want to use absolute imports, like
import Header from 'components/Header';
How do I make this work both locally and when I deploy using the Now CLI?
Using the suggested setup from the tutorial, my project structure is:
my-project
├── components
├── pages
└── package.json
Next.js 9.4 and later
If you're using Next.js 9.4 or later, see Black's answer.
Next.js 9.3 and earlier
There are different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH to the current directory, i.e. NODE_PATH=..
1. Make it work locally
I think the easiest way to set NODE_PATH=. when running the dev/build scripts in your package.json locally (e.g. $ npm run dev or $ yarn dev), is to add it to each script in package.json:
"scripts": {
"dev": "NODE_PATH=. next",
"build": "NODE_PATH=. next build",
"start": "next start"
},
2. Make it work when you deploy
When you deploy to ZEIT Now, NODE_PATH must be set in a different way.
You can add a Deployment Configuration by adding a now.json file (it should be in the same directory as your package.json). If you don't have a now.json file already, create it and add the following contents:
{
"version": 2,
"build": {
"env": {
"NODE_PATH": "."
}
}
}
This tells Now to use NODE_PATH=. when buildnig your app (see build.env).
(It also tells Now that we use Now platform version 2 which is currently the newest version (see version). Omitting the version will give you a warning when you deploy using $ now.)
In Next.js 9.4 it is possible to do it by adding the baseUrl config to jsconfig.json (JS projects) or tsconfig.json (TS projects).
// jsconfig.json or tsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
This will allow imports from the root directory. It also integrates well with IDE such as VS Code. See documentation for more information.
Change web pack configuration:
//next.config.js file
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
Then use it like this:
import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
I want to simple adding new css tags into an imported scss file like:
#import "general/global"
with the content
body {
background-color: #999;
}
It compiles with elixir (npm run dev and npm run watch; webpack) but I get errors in my console "unexpected token". I checkthes both compiled files app.css and app.js and i found this:
or
I tried to run "npm install" or "npm update" again, deleted node_modules folder etc. but nothing helps. Anyone an idea?
EDIT:
My wepback.js
let mix = require('laravel-mix');
mix.browserSync('http://192.168.99.100/');
mix.js([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
'resources/assets/js/app.js'
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css/app.css');
using: bootstrap 4 alpha6 on windows 10 pro, laravel 5.4 latest
It was an Docker / Virtualbox error. See this link:
https://forums.virtualbox.org/viewtopic.php?f=1&t=24905
For now a "sendfile off;" (using nginx) in my vhost.conf helped me.
I'm trying to setup Sass in my Angular 2 project. Basically as I understand there are two ways to create an angular 2 project
1) Using angular-cli (https://github.com/angular/angular-cli)
I referred answer mentioned in https://stackoverflow.com/a/41541042/2868352 & I could successfully use scss files in angular 2 project, everything worked great but I couldn't locate the generated css file from scss file in project folder. Could anyone explain the reason why no css file was generated but still it worked?
2) Using quickstart seed (https://angular.io/guide/quickstart)
I couldn't get any information about how to set up sass in quickstart project. Does anyone have any idea about using sass in the quickstart project provided by angular?
Thanks in advance!
[Check edited part at end of this answer in case you are using angular cli]
Explaining how to use sass in 'quickstart seed'(https://angular.io/guide/quickstart)
(https://angular.io/guide/setup#download)
Please follow these simple steps:
Step 1: Setup the quickstart seed
Use the below commands to setup
npm install
npm start
you will see 'Hello Angular' on browser.
Step 2: Install node-sass and sass-loader
Use the commands mentioned below to install
npm i node-sass -S
npm i sass-loader -S
Now you can see both of these added in your 'dependencies' inside 'package.json' file.
Step 3: Create 2 folders for Sass code and Css code
Create two folders with any name in "quickstart-master" folder. In this case for example:
"sass_folder" and "css_folder". Now create a demo file 'demo.sass' and put it inside 'sass_folder'. You can put a simple sass code in this .sass file. It will look like this:
$font-stack: Helvetica, sans-serif
$primary-color: #000
body
font: 100% $font-stack
color: $primary-color
Step 4: Make changes in 'package.json' file
Add scripts to Build and Watch Sass code present in "sass_folder". After compilation, The resulting css code should be stored in "css_folder". After changes the "Scripts" in 'package.json' file should look like this:
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"build:sass": "node-sass sass_folder/ -o css_folder",
"watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
}
Have a look at 'start', 'build:sass' and 'watch:sass' only.
Step 5: Run the application
Now you can run the app by using below command:
npm start
You will see the compiled css code in "css_folder" with the same file name 'demo.css'. It will look like this (In this case):
body {
font: 100% Helvetica, sans-serif;
color: #000; }
Now if you make any change in .sass file it will be reflected to .css file dynamically as the script is watching the code.
If it shows error, Close the .css file when you make any change in .sass file.
Note: For scss code you can follow the same steps. You just have to put .scss file in "sass_folder" in this case.
[edited]
In case you want to use Angular CLI:
At the time of creation of new Angular project use below mentioned cmnds:
For sass:
ng new Demo_Project --style=sass
For scss:
ng new Demo_Project --style=scss
To change the existing style:
ng set defaults.styleExt scss
After this you can use Cli normally.
I can explain you the first one.
If you are using ng serverthe compiled files are saved in a hidden folder in your project.
If you are using ng build, you can see your compiled files in the /dist folder. In this folder you can found your general styles in the file styles.[hashversion].css, but local component styles are included inside main.[hashversion].js by Webpack.
Angular-cli uses webpack, and if you want to learn more about, see Webpack Docs
UPDATE
In the second case, you have to compile sass manually. In the app folder un have a app.component.ts that will be compiled in the same folder to app.component.js by Typescript Compiler. So you have to do the same with sass.
Import the CSS file in the component.
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
stylesUrl: ['app/app.component.css']
})
export class AppComponent { name = 'Angular'; }
Noticed that you cannot use relative path cause everything will be requested from root directory.
Create an app.component.sass and put your styles inside.
Then execute the sass compiler that compiles the app.component.sass to app.component.css
Run the server and it will work.
There are two main scenarios here.
When creating a new Angular CLI project, use CLI command
ng new my-angular-app --style=scss
When an Angular CLI project has already been set up, use CLI command
ng set default.styleExt scss
In case 2, you need to manually convert existing .css files. You can use also use sass or less instead of scss
Check out the full article here.
Using SCSS/SASS/LESS in Angular CLI Project
It seems like if want to runt grunt on a "clean" machine we must write an external script that runs "npm install" first.
Is there a way to make grunt run first "npm install" to install its plugins in devDependencies?
Grunt is just a node module and like any other module it's uses npm for dependency management. As I know, npm itself can not be accessed programmatically from modules.
But your questions can be solved in the grunt-way. Grunt has an interface called grunt.task.exists. You can use it for checking if the tasks were loaded and if something's not, then run grunt-shell's task containing npm install. One of the ways to implement this is to dynamically create aliases:
function safeTasks(tasks) {
exists: for (var task in config) {
if (!grunt.task.exists(task)) {
tasks.unshift('shell:dependencies');
break exists;
}
}
return tasks;
}
grunt.registerTask('default', safeTasks(['one', 'another']));
Where config is the object passed to grunt.initConfig().