I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.
I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.
Code in SASS file (resources/assets/SASS/banners.scss)
section.module.parallax-1 {
background-image: url('../images/banner1.jpg');
}
Compiled with mix in (app.css)
section.module.parallax-1 {
background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}
So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.
I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?
webpack.mix code / js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs
You can use the following fix:
in webpack.mix.js add
mix.options({
processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});
Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.
(Same as where the webpack.mix.js is)
Find and remove this string from your new webpack.config.js file
{ loader: 'resolve-url-loader' + sourceMap },
When thats done you have to update your npm scripts to use your webpack.config.js file.
In your package.json use these scripts instead
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
Related
I am using Grunt to compile my SASS files. Now I need to add animate.css from npm, so I added it with:
$ npm install animate.css --save
But how do I add it to Grunt? I thought, that changing the "sass" configuration by adding "node_modules/animate.css/animate.css" to the array would be enough:
sass: {
dist: {
options: {
style: "compressed",
compass: false
},
files: {
"dist/main.css": ["scss/main.scss", "node_modules/animate.css/animate.css"]
}
}
},
Unfortunately, this doesn't work.
My main.scss file, is just a file sitting next to node_modules directory, so what I could do, is to rename node_modules/animate.css/animate.css into _animate.scss and then #import it in my main.scss, but this seems to be not the proper way of adding styles. This would mean, that every time I need some external styles, I would have to rename them to .scss
This seems to be such a basic thing to do, to import styles from npm, yet I cannot find information about it.
I am building an application with Symfony 4 and I'd like to follow the best practices for web assets. I use Encore/Webpack for SCSS and JS and it works well; the resulting JS+CSS are nicely stored in /public/build folder. I'm stuck at how to store and use static assets like images, movies, sounds.
Should images be stored in 'public/images' folder or in 'assets/images'?
And some followup questions:
If the images are stored in public/images, will I get any benefit if I pollute the templates with asset('...') calls?
If the images are stored in assets/images, then:
How are they moved into public/images to be served via http? ./bin/console assets:install did nothing, saying: '[OK] No assets were provided by any bundle.'.
How do I use them in SCSS? Via relative paths?
Regards,
Should images be stored in 'public/images' folder or in 'assets/images'?
Everything in public/ is available through the browser. In here, only production ready and build things should be put.
As your images don't need any processing (I assume), you can (should) indeed put the images there.
Now, assume you're needing to do some processing (e.g. ugly JPEG compression), you would put the images in assets/, do some processing and then put only the processed images in public/.
If the images are stored in public/images, will I get any benefit if I pollute the templates with asset('...') calls?
Yes, asset() doesn't have anything to do with Encore or asset build management. The only thing it does is fixing your URLs. This means that if you move your app to sub directories on your server (example.com/app/), the URLs will automatically adapt. Read more about it in the Asset component documentation.
Another good way to reference images with asset() method in Symfony 4 is copying images in public/build when building assets with Encore.
Use copyFiles() in Webpack Encore
Webpack Encore provides a function to copy your images on the public directory to allow asset() to access those files : copyFiles().
In your webpack.config.js
Encore.
...
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
pattern: /\.(png|jpg|jpeg)$/
})
Error: Encore.copyFiles is not a recognized property or method.
Please by sure that you are actualy using symfony/webpack-encore-bundle and not
symfony/webpack-encore-pack as described here.
composer require symfony/webpack-encore-bundle
composer remove symfony/webpack-encore-pack
yarn install
yarn upgrade
yarn run watch
My package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.22.0",
"bootstrap": "^4.1.3",
"node-sass": "^4.10.0",
"sass-loader": "^7.0.1",
"url-loader": "^1.0.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
Edit webpack.config.js after
Encore
.setOutputPath('../build/')
Add the following lines. You can also do more configuration by uncommenting the lines
.enableVersioning()
.copyFiles({
from: './assets/images',
// optional target path, relative to the output dir
to: 'images/[path][name].[ext]',
// if versioning is enabled, add the file hash too
//to: 'images/[path][name].[hash:8].[ext]',
// only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
Now you can use image by
Source: https://symfony.com/doc/current/frontend/encore/copy-files.html
Details: http://toihid.com/?p=332
I am total beginner in programming and just started to learn HTML/CSS.
For coding I started to use VS Code. And I really like it.
Only problem so far, what I got, is auto compiling of SCSS to CSS.
I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.
Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately.
I tried also Atom, and it has sass-autocompile package, and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.
So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.
You will need two things:
tasks.json file
Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
A solution without additional extensions
With sass
Assuming you have sass installed globally with for instance:
npm install -g sass
Open the folder and create a task.json file under .vscode containing
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Watch Sass",
"type": "shell",
"command": "sass --watch src/style.sass styles/style.css --style=compressed",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}]
}
With node-sass
Replace sass with node-sass in the above.
In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)
With a Workspace file
Or copy the section in your .vscode-workspace file to avoid clutter of .json files.
Make sure to change the sass source and destination files to your personal needs.
Setup VSCode
[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed.
To a llow automatic run tasks
Ctrl+Shift+P
select Manage automatic Tasks and
select Allow Automatic Tasks in Folder and
close and reopen your folder (or Workspace)
The sass compiler will be called and starts watching all your edits with a reassuring:
Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.
or with error messages when compilation failed.:
Error: semicolons aren't allowed in the indented syntax.
╷
7 │ padding: 0;
│ ^
╵
css\src\_base.sass 7:12 #import
css\src\style.sass 1:9 root stylesheet
Or use Easy Compile - it will auto compile on save.
https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile
There already is an official document out there
https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson
Only tip we can consider here is put an argument of --watch just not to build manually by hitting ctrl+shift+b every time.
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch styles.scss styles.css",
"group": "build"
}
]
}
Without any plugins, you can create .vscode folder in your project and just write some tasks.json
Easy Compile or Live SASS Compiler extensions for Visual Studio Code.
The Live SASS Compiler can recompile all sources, whereas Easy Compile just compiles a single file.
Easy Compile compiles when you save a file, whereas Live SASS Compiler can be made to watch your code and compile when it sees a change. You must manually start it every time, whereas Easy Compile runs out of the box.
I've read the documentation, which says that if I want to use scss I have to run the following command:
ng set defaults.styleExt scss
But when I do that and make that file, I still receive this error in my console:
styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)
For Angular 6 check the Official documentation
Note: For #angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.
For existing projects
In an existing angular-cli project that was set up with the default css styles you will need to do a few things:
Change the default style extension to scss
Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:
ng config defaults.styleExt=scss
if you get an error: Value cannot be found. use the command:
ng config schematics.#schematics/angular:component.styleext scss
(*source: Angular CLI SASS options)
Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)
Point the CLI to find styles.scss
Manually change the file extensions in apps[0].styles in angular.json
Point the components to find your new style files
Change the styleUrls in your components to match your new file names
For future projects
As #Serginho mentioned you can set the style extension when running the ng new command
ng new your-project-name --style=scss
If you want to set the default for all projects you create in the future run the following command:
ng config --global defaults.styleExt=scss
As of ng6 this can be accomplished with the following code added to angular.json at the root level:
Manually change in .angular.json:
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
Open angular.json file
1.change from
"schematics": {}
to
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
change from (at two places)
"src/styles.css"
to
"src/styles.scss"
then check and rename all .css files and update component.ts files styleUrls from .css to .scss
In latest version of Angular (v9), below code needs to add in angular.json
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
Could be added using the following command:
ng config schematics.#schematics/angular:component.style scss
For existing projects:
In angular.json file
In build part and in test part, replace:
"styles": ["src/styles.css"], by "styles": ["src/styles.scss"],
Replace:
"schematics": {}, by "schematics": { "#schematics/angular:component": { "style": "scss" } },
Using ng config schematics.#schematics/angular:component.styleext
scss command works but it does not place the configuration in the
same place.
In your project rename your .css files to .scss
For a new project, this command do all the work:
ng n project-name --style=scss
For global configuration
New versions seems to not have a global command
First install in your project:
npm i --save-dev schematics-scss-migrate
In your Angular CLI project:
run below command:
ng g schematics-scss-migrate:scss-migrate
Above command will do the following in the consuming project:
Rename all the stylesheets in the src folder recursively.
Alter the styleUrls in respective component classes to point to the new file names for stylesheets.
Updates the component styles schematics value in the angular.json file or creates one if the schematic does not exist, and
Renames all styles.css references to styles.scss in the angular.json file.
I have tried this on my angular 9 project and it worked...no need for extra efforts for renaming files...😎 just enter the command and BOOM!!! now your project is migrated to scss project.
refer:
https://www.npmjs.com/package/schematics-scss-migrate
For Angular 6,
ng config schematics.#schematics/angular:component.styleext scss
note: #schematics/angular is the default schematic for the Angular CLI
CSS Preprocessor integration for Angular CLI: 6.0.3
When generating a new project you can also define which extension you want for style files:
ng new sassy-project --style=sass
Or set the default style on an existing project:
ng config schematics.#schematics/angular:component.styleext scss
Angular CLI Documentation for all major CSS preprocessors
Use command:
ng config schematics.#schematics/angular:component.styleext scss
There's obviously more than one ways to do this, but with the recent versions of angular I got another schematics value which I wanted to preserve. Because of this other value the command ng config schematics.#schematics/angular:component.styleext scss failed for me, so I took the new value and entered it myself in angular.json. This is the new value you have to enter:
"#schematics/angular:component": {
"style": "scss"
}
And angular.json looks like this at the end:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
...
"projects": {
"yourapp": {
...
"schematics": {
"#schematics/angular:application": {
"strict": true
},
"#schematics/angular:component": {
"style": "scss"
}
...
Then you'll have to
rename all the css files to scss and
change all the references in your files to those.
You should be done with those steps.
manually change the below code in "angular.json" which will be at the end of the file.
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
Kindly rename the files from .css to .scss and change all the references to the same
A quick and easy way to perform the migration is to use the schematic NPM package schematics-scss-migrate.
this package renames all css files to scss files :
ng add schematics-scss-migrate
https://github.com/Teebo/scss-migrate#readme
A brute force change can be applied.
This will work to change, but it's a longer process.
Go to the app folder src/app
Open this file: app.component.ts
Change this code styleUrls: ['./app.component.css'] to styleUrls: ['./app.component.scss']
Save and close.
In the same folder src/app
Rename the extension for the app.component.css file to (app.component.scss)
Follow this change for all the other components. (ex. home, about, contact, etc...)
The angular.json configuration file is next. It's located at the project root.
Search and Replace the css change it to (scss).
Save and close.
Lastly, Restart your ng serve -o.
If the compiler complains at you, go over the steps again.
Make sure to follow the steps in app/src closely.
In ng6 you need to use this command, according to a similar post:
ng config schematics.#schematics/angular:component '{ styleext: "scss"}'
For users of the Nrwl extensions who come across this thread: all commands are intercepted by Nx (e.g., ng generate component myCompent) and then passed down to the AngularCLI.
The command to get SCSS working in an Nx workspace:
ng config schematics.#nrwl/schematics:component.styleext scss
For Angular 11+
Manually change in angular.json.
Replace the "schematics": {},
with
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
for angular version 12
Just rename styles.css file to styles.scss and update angular.json src/styles.css to src/styles.scss
I have the current version of npm installed and things seem to be OK:
The autoprefixer loads up just fine :
I created a file 'Grunfile.js'in the local project folder:
I am running this on windows 8.1
Where to from here? How do I tell grunt to check the file? How do I call the function from the command line ? Or do I call the function from the command line?
Within your directory you'll need to have 2 files, the package.json and the Gruntfile.js. To create a package.json file run the command npm init.
Next, you need to add the grunt-autoprefixer task to your package.json file which you can do by running npm install grunt-autoprefixer --save-dev.
Then, within the Gruntfile.js it should look something like this:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'autoprefixer'
]);
};
For more details on editing the settings on autoprefixer check out the documentation: https://github.com/nDmitry/grunt-autoprefixer
To learn more about Grunt check out https://learngrunt.com