I use rails and bootstrap by using this bootstrap-sass
I've moved application.css to application.scss, so I can't use *= require_tree.
There are bunch of css files in assets/stylesheets, how can I import them?
I tried following ways but all of these seems not work.
#import "freelancer";
#import "freelancer.css";
#import "freelancer.css"!force;
Update
I recently found out that there is a way to import all file, check sass-rails
When in Rails, there is a special import syntax that allows you to glob imports relative to the folder of the stylesheet that is doing the importing.
#import "mixins/*" will import all the files in the mixins folder
#import "mixins/**/*" will import all the files in the mixins tree
Scss being a superset of css, you can just change your .css extension to .scss, it will still work in the same way.
Then you can require them like this, and it should work:
#import "freelancer";
Related
styles.scss
#import 'packages/bulma.sass';
bulma.sass
#charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
#import "sass/utilities/_all"
#import "sass/base/_all"
#import "sass/elements/_all"
#import "sass/components/_all"
#import "sass/grid/_all"
#import "sass/layout/_all"
terminal
'Error: client/packages/bulma.sass.scss doesn\'t exist!
Is it possible to import SASS into a SCSS file? What is the best way to install bulma into a scss env.
I also tried #import 'packages/bulma' and get client/packages/bulma.scss doesn\'t exist!.
tl;dr can you try removing the .sass extension?
#import 'packages/bulma';
More detailed answer from this post:
The Sass #import directive extends the CSS #import rule so that it works with .scss and .sass files. It imports the file referenced and any variables or mixins that are defined in the imported file so they can be used in the main file.
#import "typography.scss";
Assuming there’s a file typography.scss in the current directory, the contents of typography.scss will replace the #import statement.
Sass makes it even simpler. If you forget to include the extension, it will look for a file with the same name and either a .scss or .sass extension.
#import "typography";
The statement above would find either typography.scss or typography.sass in the same directory as the file importing the typography styles.
#Hector is right, just wanted to add some other things.
What is valid is covered by the language docs https://sass-lang.com/documentation/file.SASS_REFERENCE.html#import so the double import might be a node-sass bug, but the extension behaviour is going to warn in the next version of Sass AFAIK. Libsass runs through a sass2scss library to transpile the "unsupported" old .sass to .scss.
Remove the leading _ from the imports, those aren't valid
use #import "../node_modules/bulma/bulma.sass"; instead of #import 'packages/bulma.sass';
It will not throw any error. For more information, you can go through this link
I using scss in my project to import scss files.
For example I have file with variables (that using everywhere in my project)
And I have desktop.scss for importing files into it
Like this
#import 'variables';
#import 'desktop/_style';
#import 'desktop/index';
#import 'desktop/step_1';
#import 'desktop/step_2';
#import 'desktop/step_3';
#import 'desktop/step_4';
According to this issue
Link
It will be deprecated.
But what I can use instead of it?
Any suggestions?
This issue is only about importing CSS into a SCSS file. From your code I assume, that you only use SCSS Files, so you won't have a problem with that in future.
My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass #import statements. It now has 2 issues in development:
Pages may load a little slower
When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.
How can I fix this?
application.css:
*= require_self
*= require main.scss
main.scss:
#import "bootstrap";
#import "base/variables.scss";
#import "styles/home.scss";
#import "styles/pages.scss";
//remaining CSS pages
_home.scss:
/* various styles, no import statement */
_variables.scss:
$color-red: #F23C3A;
//...
One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.
application.scss
#import "main";
main.scss
#import "base/variables";
#import "styles/home";
#import "styles/pages";
If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.
In your config/environments/development.rb, ensure that it includes
config.cache_classes = false
This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.
We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.
This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the #import CSS at-rule.
Sample in our root LESS file:
/* Import core LESS files */
#import "../core.less";
/* Import jQuery UI stuff*/
#import "../themes/base/core.css";
#import "../themes/base/resizable.css";
#import "../themes/base/accordion.css";
#import "../themes/base/tabs.css";
/* Import more LESS files */
#import "../morestyles.less";
If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.
Naturally, we could simply include these CSS files in the BundleConfig and remove the #import calls, but I was just curious to see if there is a way to have them bundled together.
You should read http://lesscss.org/features/#import-options.
In your code #import "../themes/base/tabs.css"; compiles into #import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.
You can use the inline option:
#import (inline) "../themes/base/tabs.css";
The above inlines the code from tabs.css into your project file without processing it.
When working with lesscss I would like to join two or three .less files into one super css file.
I know that you can do it using some little ruby magic, but I would like to know if there is something simple in the less engine?
You can use import, similar to how you can in a regular CSS file.
#import "reset";
#import "config";
#import "header";
#import "forms";
Taken from this SO post. It's also mentioned in the "Importing" section of the Less Documentation.
Simple solution:
Create a main.less file and open it (name it as you like)
Import your other css and less files via #import
#import "filename.less"; for less files
#import "filename.css"; for css files.
Compile your main.less file and just include this main.css in your site
Smile :)