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
Related
Hello I just created test angular app with command ng new my-sassy-app --style=scss project created successfully, but scss files doesn't compiled from app directory for example: when I write body {background: red} in app.component.scss but when I write same code in src/style.scss scss compiled well.
I don't know what is problem.
Not working screenshot
Working screenshot when I type same in src/style.scss
Make sure you have that line at your angular.json. Take care for style:"scss"
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
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 VS2015 and ASP.NET 5 RC1 project with some typescript files. Files are located in scripts folder and tsconfig is in this folder too. When I'm saving typescript file, js file is generated and everything is ok. But js files are not generated during build.
I have VS2013 installed also and some old projects using typescript, so may be there are some problems cause I have many TypeScript versions and many VS versions.
How can I troubleshoot compiling typescript during build? Build log says nothing about typescript. Checkbox 'Compile TypeScript on build' is project settings is enabled. In old ASP.NET projects TypeScript is enabled via custom target in csproj and it's easy to troubleshoot. But in xproj I don't see any typescript related things.
My current working solution is to add postbuild event which manually calls TypeScript compiler.
project.json:
"scripts": {
"postbuild": ["tsc -p scripts\\tsconfig.json"]
}
(assumes you have tsc in your PATH variable)
make sure this is added in your solution file
"Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')"
I had the exact same issue. Worked for me when I edited tsconfig, and placed compileOnSave BEFORE compilerOptions in tsconfig:
{
"compileOnSave": true
"compilerOptions": {
....
},
}
I am trying to setup a basic ionic 2 leaflet app using ionic 2.0.0-beta.24 and leaflet 0.7.7. After starting the default project with
ionic start test --v2 --ts
if you open the ionic.config.js file you will see the message
Ionic CLI is no longer responsible for building your web assets, and now
relies on gulp hooks instead. This file was used for exposing web build
configuration and is no longer necessary.
If this file is executed when running ionic commands, then an update to the
CLI is needed.
If your version of the Ionic CLI is beta.21 or greater, you can delete this file.
In older versions of ionic 2 you would put the directories you would want to include in this file like this:
sass: {
src: ['app/theme/app.+(ios|md).scss'],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
},
Now i guess that isn't an option, so how do i bring in the css stylesheet i need, because doing #import "leaflet"; in app.core.scss errors out because it can't find the folder.
Any help would be greatly appreciated. I am able to use the Leaflet js library because i did.
npm install --save leaflet
typings install --ambient --save leaflet
The map is loading without an issue, but the tiles are scrambled which is a sign the css sheet is not loaded. If i put in a stylesheet link in it works without an issue, but i would prefer not to have to rely on a CDN.
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
Thanks.
So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.
The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:
gulp.task('sass', buildSass);
to
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
}
})
});
It solves my issue. I also needed to call #import "leaflet" in the page that needed the leaflet css.