I've searched this question but cant fnd the right question I'm asking about.
I have an MVC project and there's some auto-generated css files that I dont use. I have a scss folder with a file a .scss file called _main-style.scss.
I have a another file that references these sheets, and I use
#import 'sections/main-style';
I'm following the same naming convention as the others.
I even right clicked and did compile. When I run on the browser, it still doesnt update. I inspect the element and the classes dont exist. It's like its not getting them at all.
Can someone help?
Thanks in advance.
From your description, seems like you know about scss and how to compile it to css.
I have an MVC project and there's some auto-generated css files that I dont use.
BUT, What do you mean by this?
Normally if you compile scss to css, and if that css is already linked with your document, It should update automatically
Turns out it needed a hard refresh
Related
I'm building in WebStorm.
I have a main.scss witch references several partial files (names prefixed with _) via #use. I have a file watcher set up and everything works fine when I'm working in the main.scss - I make changes, they get compiled and are reflected in my build.
When I make change in a partial though they don't seem to trigger the file watcher. In order for the changes to show in the build I have to jump back to main.scss and make some small change that triggers the watcher and everything gets compiled. This is a bit of a pain to keep having to do but I've tried messing around with the watcher settings and have had no luck.
Can anyone suggest a way to trigger the file watcher when partial SCSS files are updated?
Thanks
Not a full answer as WebStorm just doesn't seem to want to play ball but in the end I set up webpack and am using the sass-loader which seems to work as desired and actually makes more sense as I'll usually be running webpack anyway.
I'm trying to suppress a specific error that is related to a SASS file in Visual Studio. I'll mention that everything works great, the CSS file is generated exactly as the SASS files should generate it, and even with this error on VS, so I think maybe it's a bug on VS.
Basically what I'm doing is that I have 2 SASS files that I declare some variables in them as settings for another SASS file that contains some mixins that work according to the settings file that provided in the context.
For exmaple, these are the 2 files for the settings:
_settings-ltr.scss
$bi-app-left: left;
$bi-app-right: right;
_settings-rtl.scss
$bi-app-left: right;
$bi-app-right: left;
And this is the file that uses those settings:
_mixins.scss
#mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
#mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
Now, basically the error says that the variable "$bi-app-left" is undefined (and "$bi-app-right" as well), and I'm really not defining these variables in the "_mixins.scss" file, I pass them to the context in some other SASS file, like this:
site.scss
#import '_settings-ltr.scss';
#import '_mixins.scss';
And it works great, except that error from VS:
My Question
How can I disable this error specifically, without disabling other SASS file errors?
This is because of how the VS SCSS editor resolves variables. It does so from the perspective of the file being edited; because the SCSS editor instance for _mixins.scss does not know how the imports are resolved in site.scss, it doesn't have a way to resolve this reference. If _mixins.scss had an #import chain up to the _settings-ltr.scss (or -rtl), then it would be able to resolve the variable and the error wouldn't be shown.
Similar feedback has been raised here as well. It would be worth opening a new feedback item to better describe the scenario (and also what you're using to compile SCSS, e.g. if you're using WebPack) so the team can prioritize this as a design change. It won't get addressed right away, but we do take the number of feedback items into account for prioritizing the backlog. (And I'd love to have more ammunition to make this feature a priority...)
Currently, there isn't a way in VS to disable a specific SCSS error. This could be another feature request, but it would be a low priority to implement.
I have activated intellisense for files declared elsewhere by referencing the main file (i'll name it mainfile at my example) that imports all the other using /// <reference path="./../mainfile" />.
The code should change depending on the nesting of the mainfile (replace with the name of your own starting file that imports everything else).
Also the difference between the scss file you are adding it. For instance for two folders deep ./.. for three ../.. and so on.
Another example. I usually name my starting file main and all scss files are two - three folder deep.
../../main
./../main
Sadly i did not find a dynamic way to reference the path based on unknown members of files. Also that line has to be added to every single file.
The solution above offers intellisense which sorts the error and you can see the values on hover, go to definition etc as well.
I am wondering if it is possible to add .scss file in my component in Angular 2?
Let's say I have the following:
#View({
template: `
<div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>`,
styleUrl: ['style.scss'],
directives: [NgClass]
})
Is compiling the scss file to css the only way to achive what I am trying to do?
Thanks
It is possible, but you need to make server able to support this type of files, e.g. compile them on the fly during request, or maybe take precompiled CSS files from cache. In any case, the response when you navigate to
GET /approot/component/path/style.scss
needs to be valid text/css type. By default no webserver is going to do it. It is totally possible with Express, Apache, etc. but it requires configuration.
Another option is to use styles instead of styleUrls and require SCSS with bundlers like webpack:
styles: [require('style.scss')]
Above should work, but the notation is not that nice.
Finally, I would probably go with
styleUrls: ['style.css']
... and use SCSS for development, making sure my watch/build task compiles scss->css and puts style.css just next to style.scss in the same directory (on in the dist, wherever it needs to be). So you work with SCSS and never touch generated CSS, which is there only to be consumed by app.
styleUrls for now must be only css files list, so you need to provide the name of .css file to apply for components, so simple to think about provide the name of compiled .css file from .scss file, I found very helpful link to make that and with very well explained example:
http://www.angulartypescript.com/angular-2-sass/
This even should work in long term, hopefully the angular 2 somehow support the .scss and internally compile it.
I recomend adding scss files through import:
import 'style-loader!./your-scss-file-name.scss';
make sure the file url is correct.
I don't know why my filewatcher doesn't transpile certain scss files. I wanted to rename files that already existed to use them as partials. That worked fine for most of them but i couldn't rename all of them. When I tried to use "refactor->rename" there was a warning that the files would be used by another script but that was definitly not the case. I was not able to rename them in phpStorm so i renamed them in the directory manually. That worked but now no css files are created anymore. I tried to synchronize but that didn't help. My settings seems to be correct (see picture). Anyone had the same problem before and knows the solution?
When "Track only root files" option is on, the content of partials is merged into a single .css files when transpiling, so that a single css is generated instead of creating a separate css for each partial
i want to make a new joomla template, i dropped into that but i am confused now.
i want to know where is the joomla autogenerated css class list.
for example i insert a module in template and what is the css class for example for menu title or the css class for search input box or what is the default css class for readmore link in main.
i found a little in joomla doc but i want the whole list
I fail to understand how you are prepared to make a Joomla template which is far more complex than a plain CSS template, yet you are unable to find the necessary CSS files. You said you wanted to make a new template therefore shouldn't you know where you have put the CSS file?
You are in dire need of Firebug for starters. Have a look at all it's features. It will help you to find CSS files and the specific line you need to edit.
I assume you are editing someone elses template in which case this is the sort of location you will be looking for.
templates/you_template/css/file.css
It varies with different template so I suggest you download Firebug as I suggested above.