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:
Related
This should be simple, but I'm kind of stumped over how complex it's turning out to be.
What I would like to do is have a simple reference to my CSS in my Webpack config's entry list:
entry: {
'app.js': './src/app/index.js',
'app.css': './src/app/app.css',
},
output: {
filename: 'web/[name]',
},
app.css can import other files through the standard CSS syntax: #import url('./morestuff.css'); I would like these to be inlined as Webpack does for JS imports.
I would like that to be exported as normal. For the config above that means outputting it into 'dist/web/app.css'.
I don't want:
To import/require CSS in my JS
To have it output a JS file that either includes the CSS as a string, or dynamically loads the CSS file itself
To do any HTML rewriting
What I've tried/considered:
Using css-loader outputs JS instead of CSS.
Using css-loader along with mini-css-extract-plugin will import/concat the files as I'd like, but the actual entrypoint output file is JS, and the CSS file it makes is in the wrong folder and renamed to app.css.css. If I try mini-css-extract-plugin without css-loader then it can't handle # characters (I think it's trying to load the file as JS.)
Using the sequence of loaders ['file-loader', 'extract-loader', 'css-loader'] as indicated in the extract-loader documentation, but it behaves as above (except the CSS is output with a hashed filename.)
Lots of old SO questions refer to extract-text-webpack-plugin, but that is now an archived project.
style-loader is about HTML rewriting, not what I want.
Now this may not be the "proper" way to handle CSS in Webpack, which does seem to be based on importing everything from your JS, but it's surely a common enough pattern. Any ideas?
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 found this super informative and useful article about globalization using angular's gettext directive and grunt. Problem is, it seems to extract from .html files only and I can't really get it running with jade.
I am using Node.js for my server, together with Express.js, so I convert my .jade files to .html files on the fly, on each user request. I really like the way express and jade fit together, so I am searching for a solution, which extracts translations from those jade files.
For now I tried changing the grunt task snippet to:
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'po/template.pot': ['**/*.jade']
}
}
}
});
And also adding the translation directive as I do for all other angular directives, e.g.:
h3(translate) About
To add jade file support to angular-gettext you would need to modify extract.js in the angular-gettext-tools project because that is what is actually scanning and extracting the text. It doesn't look like a trivial change.
I would suggest a different approach. See if you can generate html for all the jade files as part of a build process and then run the angular-gettext tools against that. Then you continue to develop as you like but you do not to need to add jade support to angular-gettext.
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.
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.