You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
if you want to use .scss to css in your code, lauch the commande : node-sass -w directoryOfFile.scss -o directoryOfFile.css
-w is a watcher when you edit you file scss.
In your component, you write just the css file.
That's clear for you or do you want a example ?
I was under the impression, hence the angular-cli documentation, that all you have to do is install node-sass and rename to .scss. That is not the case then, I suppose.
The documentation says: "To use one just install for example npm install node-sass and rename .css files in your project to .scss or .sass. They will be compiled automatically."
This is why I thought it should work out of the box.
Reacted by Anthony Ciccarello, Jake Niemiec, Roger Far, Reda, Mohammad Kermani, Erin Kim and Sebastian Sanabria Diaz
Reacted by philippe beroucry, Jake Niemiec, matijamatija, jialin.huang and Sridhar Natuva
Reacted by Mohammad Kermani, Ash and Sebastian Sanabria Diaz
Did you only renamed .css files to .scss or you also renamed file names in your components?
Because you should have app.component.scss, but the component itself should reference app.component.css
Ok something is weird, when I update the css file, it does compile and output file to dist folder. But ngserve seems to be getting an empty css file, which I interprets as it is not using the dist folder.
It is not working for me as well, my environment is:
angular-cli: 0.0.39
node: 5.3.0
os: darwin x64
I installed "node-sass": "^3.8.0".
I've got the following cheese component:
import{Component}from'@angular/core';
@Component({moduleId: module.id,selector: 'cheese-app',templateUrl: 'cheese.component.html',styleUrls: ['cheese.component.css']// According to @ghidoz this is correct right?})exportclassCheeseAppComponent{title='cheese works!';}
And the following scss file called cheese.component.scss:
@filipesilva The same for ./editor.component.scss.
If I am migrating ng2 components that were written not using ng-cli - it doesn't work, fot those - created by ng-cli - everything works
For me, when I use cli to generate components the syntax is all good... references it via the scss (styleUrls)...
but ng serve picks up only app.component.scss and not any other components...
Activity
choucry13 commentedon Jun 24, 2016
if you want to use .scss to css in your code, lauch the commande :
node-sass -w directoryOfFile.scss -o directoryOfFile.css-w is a watcher when you edit you file scss.
In your component, you write just the css file.
That's clear for you or do you want a example ?
Kim-Andersen commentedon Jun 24, 2016
I was under the impression, hence the angular-cli documentation, that all you have to do is install node-sass and rename to .scss. That is not the case then, I suppose.
However, your pseudo code makes sense, thanks.
Kim-Andersen commentedon Jun 24, 2016
The documentation says: "To use one just install for example npm install node-sass and rename .css files in your project to .scss or .sass. They will be compiled automatically."
This is why I thought it should work out of the box.
ghidoz commentedon Jun 24, 2016
Did you only renamed .css files to .scss or you also renamed file names in your components?
Because you should have app.component.scss, but the component itself should reference app.component.css
briananderson1222 commentedon Jun 24, 2016
^_^ using what @ghidoz said has been working fine for me for over 2 months now :)
KrisTemmerman commentedon Jun 27, 2016
it doesn't work for me either, changed the filename to xxx.component.scss. output:
`GET http://localhost:4200/app/xxx.component.css 404 (Not Found)``
ghidoz commentedon Jun 27, 2016
If you want, I set up a starter project based on Angular CLI, with some more feature: https://github.com/ghidoz/angular2-starter
You can clone it or you can just have a look at how I set up the CSS configuration, allowing also includes. Refer to this commit for details: https://github.com/ghidoz/angular2-starter/commit/1e6a8cdea6c7b3d8d3d119482efc210d6e19620a
renevall commentedon Jun 29, 2016
nvm just changing name to scss did the trick in the end.
renevall commentedon Jun 29, 2016
Ok something is weird, when I update the css file, it does compile and output file to dist folder. But ngserve seems to be getting an empty css file, which I interprets as it is not using the dist folder.
MrHus commentedon Jul 1, 2016
It is not working for me as well, my environment is:
I installed "node-sass": "^3.8.0".
I've got the following cheese component:
And the following scss file called cheese.component.scss:
zackarychapple commentedon Jul 1, 2016
@MrHus you are on a very old version of the CLI that is pre ng-conf. Upgrade your environment and retest please.
MrHus commentedon Jul 1, 2016
I've upgraded to 1.0.0-beta.8 and it works now.
vadym-k21 commentedon Nov 14, 2016
@filipesilva Hi! I still have this problem on beta19.
Structure:
In Component:
What is the problem here?
filipesilva commentedon Nov 21, 2016
@vadym-kukhtin use a relative path
./editor.component.css.vadym-k21 commentedon Nov 22, 2016
@filipesilva The same for ./editor.component.scss.
If I am migrating ng2 components that were written not using ng-cli - it doesn't work, fot those - created by ng-cli - everything works
anrtero commentedon Feb 28, 2017
try setting default style extension with command
ng set defaults.styleExt scssdemiro commentedon May 8, 2017
For me, when I use cli to generate components the syntax is all good... references it via the scss (styleUrls)...
but ng serve picks up only app.component.scss and not any other components...
kloncentaur8 commentedon Jun 1, 2017
here is a fix, put this in your .angular-cli.json:
"stylePreprocessorOptions": { "includePaths": [ "../node_modules" ] },angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.