I have couples of CSS files in static directory of my Flask project and couple of SCSS fiels. Now I am compiling SCSS files manualy but I want Flask-Assets do it for me. I know how to prepare bundle of CSS only but is there way to mix into this bundle SCSS filec which must be compiled by filter="pyscss" before bundling?
I'm not sure about the pyscss filter but yes, you can bundle CSS and SCSS files together with the scss filter. The filter will only apply to the relevant files (*.scss in this case.) Working code from one of my projects:
assets.register(
'css_admin',
Bundle(
'bootstrap/dist/css/bootstrap.min.css',
'admin.scss',
filters='scss', output='admin.css'
)
)
Related
I'd like to incorporate fontawesome icons on my Foundation Sass project and I am having an issue. I have done everything as suggested by fontawesome team and yet it is not working...
I bower installed the fontawesome
I have added the scss file to the config.yml
I have changed the path name to fonts folder
https://postimg.org/gallery/1h018wsm8/
What I get in my browser is weird symbols and for some reason it is not working. Can you please tell me what I am missing? Thanks...
You have to #import the scss file from the bower_components folder in your Foundation _settings.scss or app.scss file.
The reference you have in config.yml is the PATH to the plugin/module not the import of the actual scss file. What this does is copy the *.scss files to the dist directory, but they still require referencing from your site/app code.
e.g. I use app.scss to import the various scss files and so my #import command for Font Awesome is:
#import '../../../bower_components/font-awesome/scss/font-awesome';
Note: this is to the specific file font-awesome.scss (where you set the font files path), not the whole directory so you also need to make sure you import the font files too which can be done via gulpfile.babel.js + config.yml.
I am using closure-compiler.jar to minify my .js files. However WebStorm doesn't give me an option for .css ? How can I minify .css files with WebStorm ?
You can create a second file watcher with 'Cascading Style Sheet' file type and set css specific parameters in the 'Arguments' field.
closure-compiler is for JavaScript only. For CSS you need to install a different filewatcher, such as YUICompressor via npm.
I have a project that I would like to use foundation 5 with. I have been through the steps of creating a new foundation project using the CLI but I don't like it. There is too many files and the structure does not match what I want. So...
I am intending to add only the required files to my project and use compass to compile all the css.
I have noticed in the project created on the CLI a few things that confuse me and would like some help in clearing them up.
In the project created on the CLI there are two _settings.scss files one under the foundation directory in bower_components and one in MY_PROJECT\scss. I'm assuming that because of this add_import_path "bower_components/foundation/scss" line in the config.rb, which of those files has preference?
Why does MY_PROJECT/stylesheets not have normalize.css (or foundation.css) in it? And how are they not there? (in my custom setup they are being generated, albeit in subdirectories of stylesheets, also the foundation.css that is being generated for me has no settings changes applied so I guess it shouldn't be being generated)
If you take a look inside \bower_components\foundation\scss you'll see the file foundation.scss. That file imports all the stylesheets for all the additional components that come in the Foundation 5 "package." In your root scss directory, the app.scss is what compiles the SASS into \stylesheets\app.css. So rather than this:
#import "foundation";
Uncomment the individual components you'll be using. Something like this:
#import
//"foundation/components/accordion",
//"foundation/components/alert-boxes",
"foundation/components/block-grid",
//"foundation/components/breadcrumbs",
//"foundation/components/button-groups",
//"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
//"foundation/components/dropdown-buttons",
//"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
//"foundation/components/inline-lists",
//"foundation/components/joyride",
//"foundation/components/keystrokes",
//"foundation/components/labels",
//"foundation/components/magellan",
//"foundation/components/orbit",
//"foundation/components/pagination",
//"foundation/components/panels",
//"foundation/components/pricing-tables",
//"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
//"foundation/components/split-buttons",
"foundation/components/sub-nav",
//"foundation/components/switches",
"foundation/components/tables",
//"foundation/components/tabs",
//"foundation/components/thumbs",
//"foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
"foundation/components/offcanvas",
"foundation/components/visibility";
If you'd like to streamline your file structure, I would suggest you remove any scss files from the \bower_components\foundation\scss\foundation\components directory that you will not use. Same with the js directory. You don't actually need to modify anything in the bower_components directory to get everything to work. Not entirely sure why it's all contained within bower_components, but I imagine it's got something to do with being able to update the core components later with future releases.
Someone else could probably give a more educated answer.
p.s. - make sure to compass watch in your CLI to see any of those changes made to your SASS files.
If I have a repository in bower_components containing a folder with 50 JS files, I cannot include them one at a time in my Brocfile with app.import(). How do I include them all in the same call?
If I try to app.import an entire directory of js files, I get this error on compilation:
You must pass a file to 'app.import'. For directories specify them to the constructor under the 'trees' option.
what you are loocking for is the broccoli-static-compiler npm package which manage this perfectly, you can get it there : https://www.npmjs.com/package/broccoli-static-compiler and it's provieded with a nice documentation.
I am packaging a Horizon Plugin. I have a bunch of templates, a view, as well as css, js files, and images.
Everything should be contained so that the package is either a .deb or a tarball. So right now I keep all files in /opt/stack/horizon/openstack_dashboard/dashboards/<my-dashboard-name>.
My question is, how do I include js and css files properly? There is /opt/stack/horizon/openstack_dashboard/settings.py file that specifies HORIZON_CONFIG.js_files, however it is always empty! I put a list of files there, it still comes out as empty in the templates. So the question is, how do I include js and css files in a Horizon dashboard plugin, for the purpose of packaging it in either a single tarball or a .deb package?
You should store static files below <my-dashboard-name>/static. It's best to namespace your static files, I use the following directory structure:
<my-dashboard-name>/static/<my-dashboard-name>/js and so on for css and img then I reference the files in the HTML templates with /static/<my-dashboard-name>/js/jsfile.js, that way you won't get any name collisions.
When someone uses your plugin they extract your dashboard and register it in the right places and then additionally they have to run the collectstatic django management command from the base openstack_dashboard directory (in your case /opt/stack/horizon/), either:
$ ./run_tests.sh -m collectstatic
or
$ ./manage.py collectstatic
That should copy your static files to the right places according to how the site has been configured.