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.
Related
Some classes like text-green-500, rounded are having effect and the styling is updated.
Ohter classes, like bg-black, don't have any effect on the styling.
I am using Jetstream and TailwindCSS.
I have solve this problem before with this :
npm run prod
this might help you
There are plenty of possibilities which may cause this, but as a kind of a workaround you could use the safelist in the tailwind.config.js, as follows:
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
safelist: [
'rounded',
'text-green-500',
],
},
and don't forget to run npm run dev.
p.s. for some reason, sometimes npm run dev is not enough and I have to go for npm run watch, and ctrl+c it after the mix recompile is over. Don't know what could the reason be, but it helped.
If you add some html with tailwind CSS elements not used before then just run 'npm run dev' and that should add the CSS classes.
After that, you can start the server using 'php artisan serve'
While you're developing run npm run watch, it will refresh the CSS requirements whenever you save a page.
npm run prod is for once you have finished developing and want to put the site into production.
As suggested by #DaviMendesDev you need to run npm to compile your classes for use.
npm run dev
or
npm run prod
this will generate .css files you can use.
I'm developing a small website with Laravel and Tailwind on shared hosting. I can use a command line tool on host. In the local environment tailwind works without problem but after npm run prod most of the Tailwind functionalities are missing and the app.css and app.js seem to have errors.
e.g. scaling on hover -> transform hover:scale-105 duration-200 doesn't work on host.
I tried importing Tailwind with cdn but it can't be a permanent solution.
What am I doing wrong??
I looking for an answer for days with no luck
I assume locally you run npm run dev and on production npm run prod. By default the development version of Tailwind does not remove unused style specification. But when with npm run prod unused styles are purged for production usage.
As you can read in the docs the the paths to your templates should be configured in the purge section of your tailwind.config.js.
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
// .. more ..
See docs:
This list should include any files in your project that reference any of your styles by name
If you don't configure these paths, Tailwind does not know which classes you use and will therefore purge all styles it does not find, f. ex. your hover:scale-105.
Solution "dirty":.
You run npm run dev in production which will result in a large build of your css, but fixes the problem for now.
Solution "clean":.
You configure your paths correctly, let Tailwind correctly recognize it and purge unused styles... and be happy.
You can test this also in your development environment by running npm run prod and see what happens.
The app.css file after npm run production still has some warnings and when I upload it in the host the warnings are becoming errors. Here is a screenshot.
However when I use the file after npm run dev everything works fine. Maybe I'm having collisions between Tailwind classes. I will come up with an answer.
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
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
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