So, I've made a migration of a Angular 5 project to Angular 6 (well, more like I did a mix with a regular migration and a new project re-using the files because of a bunch of problems). The project compiles and works nicely as it should.
Bu the Angular 5 version used sass instead of the regular css. That shouldn't be a problem: I did the following updates to allow Angular 6 to work with the scss files.
schematics in angular.json is set with "#schematics/angular:component": { "styleext": "scss" }
stylein angular.jsonis set with "styles": [ "src/styles.scss" ]
All the css files have a scss extension.
All the component have a scss declared instead of the css.
Well... That didn't work. My pages are rendered without style whereas the files seem to be correctly loaded. Did I miss something?
(Angular version is 6.1.10, CLI is 6.0.8)
Update 2
The console does not write anything related to a missing file or else.
The styled elements don't have their style.
In the DevTools the styles are not the sources tab, but they also aren't in it in the Angular 5 version (though they are in the Style Editor tab in Firefox).
You forgot to compile the scss files.
do npm install -g sass
then run sass styles.scss
which will turn/compile scss files to css one.
You cannot link a direct scss files to render styles, it must be compiled first to css.
Problem solved: there were missing dependencies in style and scripts in angular.json.
Related
I'm still new with web development. Right now, just new with angular. How can I change from SCSS to CSS stylesheet cause I accidently select SCSS style when I create a new angular project.
One more thing, how can I change terminal bar in VS Code from to . I tried to Google but can't find the answer.
Configuring Your Default Angular Component Extension
To have Angular default to generating components with CSS files and not SCSS files, simply edit your configuration. Keep in mind you can still use CSS syntax inside SCSS files.
ng config schematics.#schematics/angular:component.styleext css
You can also do this process by hand by editing your angular.json file
VS Code Terminal Tabs
Open your VS Code settings and search for terminal.integrated.tabs.enabled and check the option named Terminal > Integrated > Tabs.
I haven't used SASS or SCSS in anything besides codepen before so apologies if this is a basic question, but my CSS was working fine, but I wanted to nest some tags, and when I setup the SCSS and SASS dependencies and changed my filename to .scss, all of my formatting went away. I read something somewhere about importing an scss file into the css file, but I'm not really sure how to accomplish that.
Here's a link to the code sandbox: https://codesandbox.io/s/oj15rk1vw9
Use the Parcel Bundler template instead of the create-react-app template
Also if you're using react add react and react-dom as dependencies since the Parcel Bundler template only comes with parcel as a dev dependency
https://codesandbox.io/s/q7877ov756
If you just change all instances of style.css to style.scss then it'll work
I have created the angular project in VS Code using the following command.
ng new my-app --style=scss
by following this github link
Now every style sheet that is being created using angular-cli is with extension of .scss instead of .css
Now there is a requirement to check that how Sass is being converted to css because I am new to Sass. I am facing some issues in designing thus it would be nice for me to look at css file.
I have searched in those folder where scss file exists but there I couldn't find css file. Please help
Update
Look at this picture, when I created the component using cli, it created .scss instead of css so I need to look for css file.
I've been able to find a way to view my compiled .scss files as a .css file.
Before I only saw the raw .scss files when inspecting from Chrome.
The trick was setting some flags in the angular.json file so it will tell webpack (what angular-cli uses to build the app) that I want the .scss files served as .css along with a sourcemap of the file:
./angular.json
{
...
"projects": {
"my-prject": { <-- or whatever your project is named
"architect": {
"configurations": {
"production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
...
"sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
"extractCss": true, <-- actually serve the .css files and not the .scss files
...
}
}
}
}
}
}
Once that is updated, restart the dev server or rebuild your application
then you can go into chrome dev tools and look at find the styles.css file (or whatever you have the file name set to) and view it:
If you are working on local then:
local {
"sourceMap": true,
...
}
Sass in Angular 2 are always converted into Css in run time when you compile and build the project. However if you are using any other environment like Gulp tasks and watches, you can run 'sass --watch input.scss output.css'
As folks have already mentioned, the css is built at runtime. You can still set the result using inspect in chrome or firefox.
It's definitely a requirement to check the generated CSS when you find something wrong and Chrome Inspector can't help! So this is definitely a good question, which is why I'm here.
To summarize, #y_vyshnevska is right that "you may find your css inlined in script tags at the end of head", and he also gave an in-depth link: https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 on the topic. I put it here in case you neglect it.
It looks not possible to view compiled css files at a runtime.
However, you can do the following trick: angular applies components' styles using <style> attribute. Find the one you need in elements inspector (you can search there using ctrl (or cmd) + f.
After you've found the stylesheet you need, you'll see it's truncated. To see the entire content, click on the style element and select "Store as global variable". After that in console run
copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))
This will copy all css to your buffer
our team has finished build html style based on dot SASS files. I tried to use that sass file in Ionic 3. But, i cant find a way to use SASS file in Ionic 3. All docs and suggestions are using dot SCSS files.
Is there any way to use custom styling for Ionic 3 besides of changing variable.scss file or any dot SCSS files? I need to change major style for this app which use our own style.
Maybe i can use complied main.css from sass (builded with gulp) for ionic 3?
I tried to put complied main.css on src/assets/style/main.css and import that file in app.component.ts with:
styleUrls: ['/assets/css/main.css']
and it doesn't work.
.sass and .scss basically means the same thing, since both files contain the same, or at least should, AFIK. That is just a naming thing, so you can either rename the file, or create symlink like so:
ln -s main.sass main.scss
I have a bootstrap.css file which I want to compile with my custom styles from style.sass into single output file, for example - style.css.
For sass compilation I use gruntjs with grunt-contrib-sass extension. My Gruntfile.js config for sass looks like this:
sass: {
dist: {
options: {
//style: 'compressed',
style: 'expanded',
lineNumbers: true
},
files: {
'build/styles/style.css': 'src/styles/style.sass'
}
}
}
I've tried to import bootstrap.css into sass file, but instead it only generates next code in output css (which is correct behavior http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import):
#import url(bootstrap.css);
.....
/*my style.sass rules*/
I even tried to list multiple files in order of concatination and processing, like in uglifier settings:
files: {
'build/styles/style.css': ['src/styles/bootstrap.css', 'src/styles/style.sass']
}
But this only adds bootstrap.css into final style.css file ignoring style.sass existence.
As I'm new in gruntjs, I can't figure out how this should be done properly.
The Grunt configuration is correct. The reason your file is not being imported is because of the way SASS is designed to work.
The SASS documentation states:
By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
Since the file you are importing has a .css extension it will therefore not be imported directly but remain a standard CSS #import.
You have three options to resolve this:
Rename the included file to _bootstrap.scss. (If you don't add the underscore a bootstrap.css will be created along with your main output file which is unnecessary.)
Include the Bootstrap SCSS source as a dependency of your project and build against that. Install the Bootstrap source using Bower by typing $ bower install bootstrap-sass-official in your project root folder. (For instructions on setting up Bower see the Bower website.) Then you can replace your import above with #import 'bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';.
Use a concatenation library such as grunt-contrib-concat to combine Bootstrap.css and your main style sheet during your build process.
This first option is fine if you downloaded the bootstrap CSS file into your project manually, however, if you are including it as a dependency with npm/bower it is not ideal.
I would recommend the second option since building Bootstrap from source will not only solve your problem but allow for customization of Bootstrap variables to fit your theme rather than overwriting them with subsequent style rules as well. The only downside is that your build process might be slightly longer due to the rather large SASS build of the Bootstrap source.