I want to use semantic-ui within ember-cli project, having trouble with including fonts.
bower install semantic-ui
Import css and fonts in Brocfile.js
app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');
var semanticFonts =
pickFiles('bower_components/semantic-ui/dist/themes/default/assets/fonts', {
srcDir: '/',
files: ['**/*'],
destDir: 'assets/themes/default/assets/fonts'
});
This works, because semantic.css looks for themes/default/assets/fonts relative to itself.
Note the destDir: 'assets/themes/default/assets/fonts', this is because ember-cli puts the semantic-css within assets/ folder, and I have to put the fonts in that folder. But this looks like a hack is there a better solution?
Finally semantic-ui dist folder doesn't include different build options, do I have to compile the project myself eg: using gulp?, I thought using bower it should be straightforward.
We also got 404's for the fonts after installing Semantic via Bower. We solved it by adding the font folder as a tree to the Ember build.var
EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true
},
fingerprint: {
extensions: ['js', 'css', /*'png', 'jpg', 'gif',*/ 'map']
}
});
app.import('bower_components/semantic/dist/semantic.css');
app.import('vendor/shims.js');
var semanticIcons = pickFiles('bower_components/semantic/dist/themes/default/assets/fonts', {
srcDir: '/',
destDir: '/assets/themes/default/assets/fonts'
});
return app.toTree([semanticIcons]);
};
Looking at semantic-ui, it seems pretty gigantic, and specifically setup with gulp.
First off, I would use the flag --save in your bower request.
bower install --save semantic-ui
This will add it as a dependency to your bower.json automatically - or --save-dev if it's only for development and not production.
Semantic-ui looks like it's written in "LESS", so not only do you have to deal with a favored build tool, but also it has opinions about the preprocessor.
The fonts involved seem to be just some google includes, and some svg fonts.
My advice, if you really really want to use a monstrous set of CSS declarations like this, - in this situation - would be to take the /dist output .css and .js -and- combine it with YOUR favorite css pre processing setup - and just override where appropriate. - or borrow the forms or whatever specific styles lead you to want to use this.
I am worried that fully integrating it into your ember project wont be as smooth as intended... and that you won't get a terribly useful amount of stuff out of keeping it in sync.
Just my opinion, - but I can't comment yet. - and I think you would be better off just writing the styles in stylus from scratch anyways. : )
I had the same problem.
I don't know if there's a better way, but I added the following line to the config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'semantic-ui', 'dist')
This adds the dist folder to the asset path, so when semantic-ui is looking for /themes, it will be picked up.
Related
Actually for a recent project i downloaded a theme (Admin Panel). It mostly contains css in parts in the form of .scss files . I tried editing files directly from style.css but nothing seems to change . so i did little bit of research and found that scss files need to compiled again . I don't know how to compile .scss files. On their github page i found that it can be changed with the help of following commands
gulp serve
I don't know the above command was to compile again scss into css but it didn't work
So ,kindly help with this or just a provide a link to the tutorial from where i could learn this
Here's the link for the project that i have just downloaded
https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template
Thanks in Advance
Setting up a SCSS compiler for a project where you don't use SCSS yourself is tedious. Instead, try compiling it quickly and edit the CSS files after you compiled it.
You can use free compilers online, for example https://www.cssportal.com/scss-to-css/.
If you would like to start a project with SCSS where you compile it, you can indeed use the GULP setup provided by Bootstrap.
https://mdbootstrap.com/bootstrap-gulp-tutorial/
You can also easily setup Gulp yourself:
https://codehangar.io/gulp-sass/
The above URL explains the following a little more extensive:
npm install gulp-sass --save-dev
Structure:
-index.html
--assets
---styles
----sass
-----index.scss
----css
The 'styles' Task
//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Watcher
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
gulp watch
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 just installed Foundation 6 through:
foundation new
I chose Foundation for Sites. The file structure is created ann all look ok.
then i run
foundation watch
everything looks fine. The gulp runs and watches the changes.
i then created _custom.scss and imported it into app.scss with:
#import 'custom';
i even put the command to the end of the file to see if this changes anything.
I write some css in the custom file then i save.
I can see the custom css created inside scss/app.scss file but the custom CSS does not appear.
Also even if i change a parametter in _settings.scss like
$body-background: $black;
it has no effect.
All the above changes are reflected in the
foundation watch
terminal window though. I can see the sass compiler updating without errors.
thanks
Maybe it's cache, you should check that. I don't know how foundation new is working, but it's watching the foundation source code right? Maybe there is a conflict between foundation tool and gulp. What I mean by that is that maybe foundations is compiling, then gulp is recompiling without your file.
I suggest you to check:
Maybe there is some cache provided either by foundation or by gulp-cache or other plugin
It is possible some kind of rewrite, so check that too
Make sure there are no errors in your file, otherwise the changes won't be made
Your custom file should be included last, so it can overwrite other classes
If this didn't help, try a different approach with gulp and bower. Make these changes to your gulpfile:
var gulp = require('gulp'),
...,
connect = require('gulp-connect'),
sass = require('gulp-sass');
var paths = {
css: [
'bower_components/foundation-6/css/foundation.min.css',
'src/sass/*.scss',
'src/sass/**/*.scss'
],
...
}
gulp.task('connect', function() {
connect.server({
root: 'dist',
livereload: true,
host: '0.0.0.0',
port: '8080'
});
});
gulp.task('css', function() {
gulp.src(paths.css)
.pipe(sass())
...
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch(paths.css, ['css']);
});
gulp.task('default', ['connect', 'css', 'watch']);
Basically I am suggesting to download foundation scss with bower, and include it in gulp.
I have set up a gulpfile.js in my project. It's working pretty nicely mostly, except when it comes to generating source maps, especially for the LESS files it compiles to CSS.
I have put together a gist which contains all the files in my gulp setup. Please note that other than the gulp file.js itself, all the other files are inside a directory called tasks.
The problems I am having are that
I had to disable the autoprefixer in development because the source maps that were being generated were invalid as the autoprefixer modified the original CSS file after the source maps were generated. To compensate, I have added mixins that add the vendor prefixes during development, and I have to disable those for development and enable the autoprefixer for the production environment.
I am unable to generate a minified CSS file at all if I want source maps. The minification breaks the source maps.
Although I have LiveReload set up, and the associated browser plugins, I cannot get the CSS to get auto-injected into the page as I am making changes.
If anyone can help me structure my gulp file.js to work more efficiently and more effectively, I would appreciate it.
Again, my gulpfile.js and associated tasks are in this gist.
I had to disable the autoprefixer in development because the source maps that were being generated
The docs at https://www.npmjs.com/package/gulp-autoprefixer describe how to use the autoprefixer with gulp-sourcemaps:
gulp.task('default', function () {
return gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('all.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
The above create a new source map for all.css. So you should load the sourcemap generated by the less compiler first, see https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps
The docs of gulp-minify-css do not describe such an usage, but possible you can do:
gulp.task('minify-css', function() {
gulp.src('./static/css/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/'))
});
Notice that in most cases you minify only your code for production. Development code, which has source maps should not have to be minified.
Since version 2 of Less you can use plugins for the Less compiler. Also gulp-less allows you to use these plugins (programmatic) see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code
Documentation of gulp-less describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins. Notice that gulp-minify-css is leveraging clean-css's code too.
Also the usage of gulp-less with gulp-sourcemaps to create sourcemaps has been described at https://github.com/plus3network/gulp-less#source-maps
So you should be able to use:
var LessPluginCleanCSS = require("less-plugin-clean-css"),
cleancss = new LessPluginCleanCSS({advanced: true});
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
gulp.src('./less/**/*.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss]
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/css'));
The above should generate the autoprefixed and minified CSS of your Less source, with CSS sourcemaps written into ./public/css/maps
I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow:
Edit bower_components/bootstrap/less/variables.less
Recompile bootstrap using grunt build
The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to variables.less.
Is there a way I can keep my changes outside of bower_components and also avoid having bower_components in source control since it's 122MB?
you can create a variables-custom.less and import it into theme.less like this:
//
// Load core variables and mixins
// --------------------------------------------------
#import "variables.less";
//import custom-variables after variables so the values will override.
#import "custom-variables.less"; //only has variables that have changed.
#import "mixins.less";
IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower
Here's the solution which worked for me:
Use bower to install all UI packages e.g. bower install bootstrap chosen
Create a separate folder less which contains all the LESS modifications. This article was very helpful here.
Here's my less/styles.less file:
#import "../bower_components/bootstrap/less/bootstrap.less";
#import "../bower_components/bootstrap-chosen/bootstrap-chosen.less";
//My custom variables - overrides the bootstrap variables file
#import "variables-custom.less";
Use grunt to monitor changes within the less folder and compile them into .css
Here's my Gruntfile.js (thanks to this answer):
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],
yuicompress: true
},
files: {
"./static/css/styles.css": "./less/styles.less"
}
}
},
watch: {
files: "./less/*",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
This is indeed the best customization method. You create a theme.less and pull in original Bootstrap files (which can get upgraded in the future) and in the same file you call your own custom overrides. Either you #import them from a custom file which is not in the Bower directory or you just write your custom rules in your theme.less itself. You'll find this technique explained in this tutorial as well.
With Grunt, custom setups can get tricky. But with Brunch it's a piece of cake (yes!) and all pretty much goes automatically. Your grandma could do it.
As for avoiding the inclusion of bower_components in source control: with Git it's easy. You just check-in your bower.json but make sure to add /bower_components to your .gitignore file.
You should just create your own style sheet, use both with your custom one listed secondly. That way you can make changes but not change bootstrap at all.
Also, when you update, you keep your style sheet the same.
This allows you to change bits and pieces of Bootstrap but not actually changing the file, you're overriding it.
To be clear, your second CSS file would be SIGNIFICANTLY smaller... Only putting things your needed to change in it.