I have been handed a project where they have been compiling LESS files into a css file which is being used for the site.
Is there a way to reverse engineer this? I have downloaded simpless and tried to compile all LESS files into the same CSS file but it just keeps emptying it.
Is there a way somehow to figure out how they have been doing it?
The easiest is to use third-party applications like: https://incident57.com/codekit/ or http://koala-app.com/. Just drag and drop your LESS files and click Compile!
I am using Visual Studio 2015 and Web Essentials extension and I modified the solution level "compilerconfig.json" file to map the multiple input-output files and it works for perfectly for my by compiling all of the input less files into css output files.
[
{
"outputFile": "css/styles.css",
"inputFile": "css/styles.less"
},
{
"outputFile": "multiselect-dropdown-lib/MultiselectDropdownStyle.css",
"inputFile": "multiselect-dropdown-lib/MultiselectDropdownStyle.less"
}
]
I re-read your question and I think you are looking for compiling all LESS files into a single CSS file. If that is the case, then my soloution is slightly differnt. It compiles all LESS files into corresponding CSS files.
Related
So I've been searching a bit and it seems like using Delegate.SassBuilder is a good way to add SASS to your Blazor project. It detects any .scss files and builds them into .css files in the same directory.
It works as expected, however, I'm looking for more customization regarding "code behind" files, but with CSS files instead (not sure what the right term is except "code behind but for css"). By default, your Blazor application will contain files such as this:
So you have a .razor file, and then you have a .razor.css file. In index.html, it adds <link href="projectname.styles.css" rel="stylesheet" /> automatically, which handles these styles.
However, if I rename that .css file to .scss and build the application, I end up with this result:
It works, but I have to build it first, then run the application. Quite annoying. What's also annoying is that the files are no longer nested. I would like to see something like this instead:
What would be even better, is that the .css file is hidden and I just have to deal with the .scss files. I honestly don't care what the .css file contains, as it has been minified and so on.
There must be a better way, but I can't really find it.
Okay, so it seems like I have two options:
A) Create a .filenesting.json file and have this as the content as the extensionToExtension (might need to be modified a bit):
"extensionToExtension": {
"add": {
".razor.css": [ ".razor.scss" ],
".razor.css.map": [ ".razor.css" ],
".css": [ ".scss" ],
".razor.scss": [ ".razor" ],
".cs": [ ".cshtml", ".razor" ]
}
}
B) Somehow get <None Remove="**/*.razor.css" /> inside .csproj to work. As it is right now, the engine that handles CSS isolation does not look at excluded files.
For now I'll stick with option A, because that seems to 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
I'm working on a Create-React-App project, which notoriously does not support css transpilers such as SASS and Less. The general solution, as discussed here and here, is to compile the source .less/.scss and import the build product .css into your components. Then you can remove all .css from source control and only track .less/.scss.
This is a fine solution, but only a handful of my components really need Less for clarity/extensibility; for the most part, pure css is fine. So, what I'd like to do is use .css everywhere except for some .less sprinkled in here and there. I can configure this with the Less compiler, but for source control I'd like to watch only the "source" css files, and ignore the "build" css files (generated from Less). Because of this I cannot blanket .gitignore all .css, since some are truly source files.
So, is there a glob pattern for this? Maybe:
*.css where *.less
I see two other possible solutions:
switch everything to .less, even when it's not necessary, and go on ignoring all *.css
selectively .gitignore only the .css that are build products.
I like option 2, but it just seems a little error prone and more maintenance.
Switch everything to less is the verter choice: only one why to make css. It is also easiest to understand how project works for a colleague.
You should also keep different css folders for generated and non generated css file. Then, you can just ignore folder with generated.
You could get 2 folders for exemple src and dist
Simply put source .css and .less files in the src folder and when compiling this folder, copy the .css files to the dist one while .less files are compiled.
But I prefer your "all .less" approach which is less confusing for other developpers.
I'm just starting to play with SASS in Visual Studio. The question I have is that if I put my .scss file in the theme folder, the compiled CSS file will automatically be added to the site. The problem comes in that it generates a .css AND a .min.css file and BOTH are being applied to pages that use the theme.
Is there a way to have VS only add the .min.css automatically? I'd love to keep them in the theme folder and let VS handle linking everything automatically, but I don't want the stylesheet to be added twice. Or is there something else that is considered better/best practice that I should be doing with SASS files?
Are you using Web Essentials plugin to compile SASS? If yes, in its options, you can change it so when it compiles it can output min, css or either.
example for LESS (same for SASS):
Plus, even if VS is producing min and css files, it wouldn't make much difference since bundling will only use one file. You can just exclude certain files from the solution, and they will be ignored.
You could also look at build tools such as Gulp or Grunt to compile sass - they have much more options that you can apply.
I'm new to using SASS and Sublime Text 2 for WordPress development, both are exactly what I need but I've run into a problem with compiling my SASS into CSS, which I'm trying to do using the SassBuilder package like it was in Hongkiat's guide.
The issue could be one of the following -
config-file using incorrect output-path (seems to be the case to me
personally).
config file location needs to be changed.
my coding SASS could possibly be wrong causing no changes to occur on the style.css file.
settings wrong with Sublime Text 2.
My files are SCSS and thus will not work with SassBuilder
The Underscores framework stores the style.css file in the root of the theme folder so
theme/style.css
this is while the sass files are found within a folder in the theme folder so
theme/sass/sassfiles.scss
In my .sassbuilder-config.json file (The file used by SassBuilder to compile into CSS) I currently have the following code, but I'm unsure whether my output_path is actually targeting the style.css file which is in the folder above the .sassbuilder-config file
{
"output_path": ".../style.css",
"options": {
"cache": true,
"debug": true,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
Is this targeting the correct file, if not what would the correct code to make it do so be? I've done some Googles but keep coming into pathing code for non related languages.
I could also consider moving the config file but the Hongkiat guide states it should be in the same folder as the SASS files, from what I've understood.
My code could possibly be wrong, but all I've done so far is just some basic variables to actually test the compiling and that not working when tested is why I'm here, I've copy pasted a font weight variable to all relevant files, individually, in various combinations and altogether even though the import should have sufficed - but even then it did not update the style.css in any case.
To get into detail regarding the code I'm trying to apply a font style to all headings, though one confusing thing is that there are two typography.scss files to be found with Underscores, though their contents sort of differ.
The SASS variable in theme/sass/variables-site/_typography.scss
$font-header-weight: 800;
Then in headings which if found in theme/sass/typography/_headings.scss
h1,h2,h3,h4,h5,h6 {
font-weight: $font-header-weight;
}
The other _typography.scss file draws variables from the one above so I presume that adding another variable was the thing to do.
As for Sublime Text 2, I'm new to Sublime Text but I've seen on tutorials and web articles etc that people are using code to watch but I'm unsure where/which program I do this with (is it command line?)
I have also followed the guide on the SASS site to get the code running so it shouldn't be that (using Ruby version 1.9.3-p551)
If the issue is SCSS files and not SASS, how do I compile it then? as I've looked that up too but am still as confused.
Hope I get some clarity on this soon, stuck at the first step and I just want to get on and start designing!
To summarize, I just want my SASS to start watching/compiling out to my CSS file.
I'm using a similar arrangement to you.
Try this:
Instead of Sass Builder (or in addition, i have both installed)
download and install the package "SASS Build" by Jaume Fontal.
Then, in Sublime Text 2, Preferences -> Browse Packages, go to the SASS Build package folder and edit the very short build file (SASS.sublime-build) as follows: (note you only have to add the /../ in the first line)
{
"cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
On my install, it now compiles scss to css in the parent folder.
Surely
"output_path": ".../style.css",
should just read
"output_path": "../style.css",
your output path is just incorrect I think.
I decided to go with ScoutApp as a solution, may not answer my immediate query but it makes things a lot more simple, straights forward and less fiddly.
Also I did change my out_path code to ../style.css but it didn't help.
Have you installed sass? If not use gem install sass in a terminal window, restart sublime text and try again.