I'm currently playing with Rails 3.1 RC4, and when I try to generate a scaffold:
rails generate scaffold animal
I notice that it creates a CSS file in:
app/assets/stylesheets/animals.css
I was expecting it to generate an animals.scss instead.
Am I missing something?
PS: I got Haml to generate correctly following the instruction from here.
On May 24, 2011, SCSS generators were moved out from Rails, and put into Sass Railtie.
See this commit.
This means in your application, you need to include sass-rails gem in your Gemfile to get the generator working correctly. In other words, it's not enough to simply include sass gem to get the generator working.
When SCSS is finally generated, your stylesheet will look something like mystylesheet.css.scss.
By default, SCSS is used.
Related
our Team, work with laravel and we want to start a large scale project.
The front-end project will be written with Html Css Bootstrap jquery Sass
and we task runner is Gulp
How will our project directory be?
sass directories and my file and images Where do they go?
You can use Laravel Mix to compile CSS and JavaScript pre-processors. So you will store all your assets into resources/assets folder.
Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.
To use laravel mix you have to first install node and npm.
Then create files app.js and app.scss in resources/app/sass directory and resources/sass respectively.
Then open webpack.mix.js file which will be on your project root write the following code in webpack.mix.js file
In webpack.mix.js file (you can see this file at your project root directory)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Now let's see what is the meaning of above two lines?
mix.js('resources/assets/js/app.js', 'public/js') says to read app.js contents (which is stored in resources/js directory), pull them and put them up in public/js after mixing them up.
Same is for mix.sass. Since it is using SAAS compatible so you may use CSS or SAAS based syntax to define your layouts. Webpack compiled them to a single CSS anyway. Now in master.blade.php, all you have to make these two calls for JS and CSS resources respectively:
<script src="{!! asset('js/app.js') !!}"></script>
and
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">
Now run npm run dev command.
It will compile your CSS and JS files and put the build inside a public folder.
For detail explanation you can check
https://laravel.com/docs/5.7/mix
https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/
It varies from projects and frameworks. Put the stuff where you find that it makes the most sense. If you're running a standalone frontend app that uses Laravel as backend API you'll probably do well organising your app with it's own tree.
But considering you're using html, css, jquery and sass, which are standard web techniques, this is what Laravel is basically built for. So use blade-templates for the html and put all your jquery and css in the public folder. If you haven't used Laravel before you should probably plow through a series of tutorials to get the idea of its MVC structure.
I'm trying to make a simple Yeoman generator in ES6.
I think I followed the documentation.
After $npm linkin the current folder of my generator i go in another directory and try :
? 'Allo Emmanuel! What would you like to do? (Use arrow keys)
Run a generator
❯ Starterpack
──────────────
Update your generators
Install a generator
Find some help
Get me out of here!
──────────────
My Generator seem to be avaible, but not :
Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo starterpack
Error
You don’t seem to have a generator with the name “starterpack:app” installed.
If needed all code are available here : https://github.com/ethyde/generator-starterpack
What I did wrong ?
Thanks.
EDIT : Fixed, thanks, I have updated the repo with the answer.
Your generator is not exporting a standard node module. See this line https://github.com/ethyde/generator-starterpack/blob/master/generators/app/index.js#L77
Babel by default compile es6 module files to exports.defaults. Yeoman expects a usual Node.js export. In other words, it expects your generator to be exported as module.exports = Generator.
You'll need to update your babel configuration.
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
I was wondering if there is anyway to compile a scss file to css and inside the css file are comments that tell you what changed in the scss.
It might look something like this:
/* line 9, ../sass/foundation/components/_global.scss */
html,{}
I just recently started working with sass and the person previously who did the sass compiling used compass. I read somewhere that it involves the config.rb but I can't find this file. Can anyone help?
According to the Sass Reference, the correct option is :line_numbers – you want to set that to true. That will generate comments with the format in your question.
How to set that option that depends on how you are compiling your Sass. Installing Compass would set up a configuration file config.rb in which you could write line_numbers = true. If you're just using the sass command-line tool, there is a command-line switch to enable the option, according to sass --help. You can use the command sass --line-numbers to compile with that option enabled.
I am making use of System.Web.Optimizations BundleConfig in my project. I'm running into an issue with a specific jQuery plugin that I'm using on my site. If I add the file to my ScriptBundle it works fine in Debug mode but throws JavaScript errors when I am in Release mode (i.e. set Web.config debug=false). I'm thinking something isn't getting minified correctly.
All others scripts are not giving me any problems so I don't want to affect behavior for all bundles but is there a way to customize for a specific bundle to tell it to use a specific version in debug and the min version in release.
I know the default behavior is for it to look for .min files but I just can't seem to get this to work. Can anyone tell me what I may be missing here? Thanks for your help.
Here is example I split it out by self. This works in debug but not when i set debug=false in web.config
ScriptBundle layoutBundle = new ScriptBundle("~/jsbundles/jquery/layout");
layoutBundle.Include("~/Scripts/plugins/jquery.layout-latest.js");
bundles.Add(layoutBundle);
If you just want to turn off minification for one bundle, you can simply switch to a normal Bundle instead of a ScriptBundle and it won't be minified. Then it will serve that bundle in whatever form that you included without running it through minification.