In Wordpress, my main style.css file imports various sub-files, such as content.css, archive.css, product.css and so on:
#import url("content.css");
#import url("archive.css");
#import url("product.css");
Without success have I have been looking for a way - through browser console or online resource - to download "in a shot" a single CSS containing style.css plus all related #import files, without having to copy and paste all of them in a new file.
Do you know if there is a solution for this? Thank you.
You could use a CSS pre-processor such as LESS or Sass (SCSS), they come with many other features as well.
Depending on the editor you already use you might be able so simply install a package (like Easy LESS for Visual Studio Code), rename your style.css to style.less and be done.
Choosing and switching to a CSS pre-processor might however, depending on your circumstances, environment and experience, not be easy or straightforward at all.
I'd suggest just to copy paste them your css files into one. Using a tool for a simple task as this one can only result in bugs.
Related
I have multiple SCSS files that I want to import into one main SCSS file. I want ALL of the contents of that file to be imported, basically copying the entire document into the other one. Currently, I am using #import, which is exactly what I need. But now it has been announced that it will be removed from SCSS, and I'm afraid that #use cannot replicate this functionality that I need. With #use, I can only import selected variables, classes etc., but I want the entire file.
Two possible solutions (that I don't want to go for):
A) Writing everything in the same file. But that would become quite messy. I have one template SCSS file with variables and utility classes (a lot of them), and 3 other files for custom code (so the CSS of a site can be changed by multiple people at the same time, having only one file would limit it to one person at a time)
B) Loading multiple stylesheets on the site. That would be the better option, but that would cause a lot of unnecessary requests on the server.
Any ideas? I'm using SCSS in Wordpress. Will the #import rule be unusable once it's been removed from the language? What if I didn't update the Plugin that compiles the SCSS? It's frustrating because the current #import rule does exactly what I need...
Thank you!
The question is more or less resolved. I was trying to migrate from #import to #use in an environment that does not support the #use rule at all. As I said, I'm using a Wordpress plugin to compile. #use is only available in Dart Sass and upon using it in my setup, the compiler would throw errors, as it is based on phpsass, which does not have #use or #forward and still uses #import. Which make everything a lot easier!
I'm starting to learn by my own and I tried for the first time to use sass in order to get more clean my code, having everything on sections. So the problem is when I try to give some styles to the navbar, I don't know why when I write code it doesn't apply. Maybe is because I'm not linking correctly or just using bad the sass compiler.
The best option to help me is take a look into my repository where I started to build this project to practice. I really hope could help me because I want to create differents sections like navbar, body, articles, footer using sass and give them styles.
https://github.com/Shylex96/test-portfolio
Edit: After a long search about this issue I see there is a problem with "use" and I have to change rules or something like that, but still don't know.
Replace #use with #import in your scss files.
Try updating your \util\style.scss like below:
#import '../globals/';
#import '../components/';
Save and compile them then copy the resulting css files to dist folder if they weren't copied automatically.
Update the stylesheet link in your index.html file to:
<link rel="stylesheet" type="text/css" href="dist/style.css">
It should be "dist/style.css" not "/dist/style.css"
FINALLY!! I solved it and I'm going to commit what helps me if someone have same issues..
I had to reinstall node.js, install gulp, and change "about_Execution_Policies" from windows.. when I did, I could finally install gulp correctly and then I install again sass. Of course, I just converted all the changes that people told me about into the first ones I had.
I created a new file called gulpfie.js and two more files: .gitignore and .gitattributes
So, If someone need it, can check the changes here: https://github.com/Shylex96/test-portfolio
I am planning on dividing up my LESS CSS into multiple files to modularize my CSS and make it easier to manage and maintain. Ultimately I will be using #import to import all of my modular CSS files into one file that will get enqueued in WordPress.
Is #import a bad idea for performance?
Yes, using multiple imports will incurr equivalent number of file requests the browser has to make.
As long as you compile the LESS source into a CSS file and include that CSS file as the stylesheet for your site, performance will not be an issue.
For example when you make a Wordpress theme you can make a folder for your CSS and then compile it using for example simpLESS (if you are on Windows)
Sample template directory structure:
-themes/
-your-theme/
-less/
-main.less
-import.less
-etc.
-style.css <- this is the target file you would compile into
-index.php
-etc.
You can setup the target file to compile into easily. Also, simpLESS will keep the first top comment in the resulting file so that you can put your theme information in it.
I currently have a web application which is using SCSS, symphony, and doctrine amongst other libraries. It's well setup and heavily structured.
We are currently attempting to use Bootstrap.css to style it visually, however it's become quite an issue as we began trying to use SASS/SCSS #import function so we could #extend bootstraps classes. However when attempting to do so, it became problematic.
#import url('/bundles/iccsrpit/sass/css/_bootstrap.scss');
The above somewhat works (the code is never actually included in the css file when looking at Firebug. I can click on the path, and it brings me to the file.
#import '/bundles/iccsrpit/sass/css/_bootstrap.scss';
Causes a complete break of the CSS file, and I'm not sure why I can't access the file in this manner.
If anyone can offer a solution to this problem, please help!
Thank you,
iRed
This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using #import as described here.
If I use #import to include normal .CSS files, they are not merged. The output .CSS file still contains the #import directives. That makes sense.
But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge #import "foo.css"; just as if it were a .SCSS file?
I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?
every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then #import from the main scss file using #import "filename"; (extension optional) it should compile to one big CSS with no #import statements inside it
edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way
I haven't found a way to do this in Sass.
My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.
Example:
// ORIGINAL: locally managed, modified copy (bad), no #import in output (good)
#import 'my_modified_copy/closure/goog/css/common.scss';
// WORKAROUND: vendor-managed (good): #import in output (bad but acceptable)
#import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';
Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.
This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.
Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown:
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
I hope that this is helpful, and please let me know if you need anything else on this one.