I am setup the project of the vuejs on of the my goals in the end of the project is to compile files scss which is the main file with name style.scss- from input to output in the file main file style.css to Load in the vuejs.
Also all files .scss should include with #importfor examples: #import "variables";and so on
in the main file style.scss.
I read about it.enter link description here
My project is as in the picture below.
Any idea how to sole it?
Thanks.
My dear friend, if I have understood your meaning correctly, I would like to try to offer you some solutions.
In order to use SCSS in a project and compile it automatically in the background, we can do the following steps:
1. Install node-sass
To get the compiler, we’re going to install the node-sass package.
Go to your terminal, navigate to the project folder and type in the following:
npm i node-sass
2. Create an SCSS folder
Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.
Rename the extensions on all the newly pasted css files with .scss
You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.
3. Add a script in package.json
In your package.json file, locate scripts and add the following piece of code inside it:
"scss": "node-sass --watch scss -o css"
If your css folder is named something other than css, then replace the word css with the folder name.
Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.
Setting context in the overall package.json file, the script will be placed like this:
{
“name”: “example-project”,
“version”: “0.4.2”,
“scripts”: {
“start”: “node ./bin/www”,
“scss”: “node-sass — watch scss -o css”
},
"dependencies": {
"express": "~4.16.0",
"express-favicon": "^2.0.1",
}
}
4. Run the compiler
Get back into terminal and run the following commandL
npm run scss
Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.
if you have any new idea about Compile SASS to CSS you can check another steps with this link.
I am learning SASS. I am using VS Code as my code editor. I have installed Live SASS Compiler extension to compile SASS file.
I have created a folder. In this folder I have multiple folders. I want to create css file in each folder not main folder.
Check the image:
In SCSS folder there is a folder named "Partials-and-Imports". I want to create the css folder in the "Partials-and-Imports" folder not in main folder(CSS) because I have to create multiple folders in the main folder.
How can I do that?
Just copy and past this block of code in your sass compiler setting - Set your exported CSS Styles, Formats & save location - :)
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]
Angular CLI 9.1.3
Node 12.16.2
OS: darwin x64
My project was originally created to use css. Since then, I have taken the necessary steps so that the project will recognize and compile sass/scss. Unfortunately, new components are still being generated using css (quite annoying).
I've checked my angular.json file to find that all of the required changes have been made. I have gone through several guides and performed the same steps over and over to no avail. The project recognizes scss. The main styles.css is now styles.scss. The application compiles as expected. It is simply the new component generation that is not working as expected. Any help is welcome.
Inside your angular.json you need to update/add the following path:
"projects": {
"[PROJECT_NAME]": {
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
}
}
Also make sure you don't have any (very) old global angular cli by using:
npm i -g #angular/cli#9.1.3
I am trying to set the save location of my css file to its own css folder in the Live Sass Compile Config (Live Sass Compile > Settings:Formats)
I have tried setting the savePath to "/css" - After this - I tried saving my main.scss file, which is supposed to generate a css folder with a main.css file in it. However, it is just generating a main.css file in the same folder as my main.scss (which is in a scss folder).
I have tried uninstalling and reinstalling VSC but my previous settings were saved.
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
"window.zoomLevel": 0,
"editor.tabSize": 2,
"editor.wordWrap": "off"
}
The code above is all that shows in my .json file. The top 3 lines are greyed/blacked out (format to save path).
This display in my .json file is way different than what I'm finding in tutorials on this.
I strongly suggest you to avoid using that for sass.
Use node-sass instead. It's super easy to setup and run!
Just install it from command line:
npm i node-sass -g
And run it in the background:
node-sass [entry path-to-file] [output-path-to-file] -w
The -w watches for changes in your .sass or .scss file and compiles straight away!
In your settings.json rename the path form "\css" to "\\css"
Like this:
{
"format": "expanded",
"extensionName": ".css",
"savePath": "\\css"
}
Don't worry it's how VS Code understands file paths. Not your fault:)
Refresh the main css file for every change in your child scss files (ctrl+s)
Make sure you renamed your sass main file style.scss.
If your sass main file have underscore before name like _style.scss, your live sass compiler will not generate .css file.
So rename your main sass file from _style.scss to style.scss.
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