I want to create a custom theme with semantic-ui, but they don't have official support for Aurelia yet and a lot of unwanted errors pop up after npm install semantic-ui --save. I want a clear answer and aurelia.json dependency code for semantic. Thanks.
1. aurelia.json dependency
"dependencies": [
...,
{
"name": "semantic-ui",
"path": "../node_modules/semantic-ui/dist",
"main": "semantic.min.js",
"resources": [
"semantic.min.css"
]
}
]
Side note: you might also have to list dependencies using the "deps" value. Try it without this at first, and if you need to, you can see what other libraries this repo requires.
2. Import JavaScript file
In either app.js or in each view-model you'll be using the library, use one of these imports (try them one at a time; one of them is likely to work).
import * from 'semantic-ui';
import 'semantic-ui';
3. Require CSS
In either app.html or in each view you'll be using the library, use the following require statement.
<template>
<require from="semantic-ui/semantic.min.css"></require>
<!-- rest of your code here -->
</template>
4. Legacy prepend
If none of the above works, import it as a legacy repo using the prepend section of aurelia.json (before the dependencies section) like this:
"prepend": [
// probably a couple other things already listed here...
"node_modules/semantic-ui/dist/semantic.min.js"
],
First: If you don't need to customize Semantic UI, you can simplify by using pre-built package, downloadable as a ZIP. See Semantic UI "Getting Started" for that tip.
This is not elegant, but it works:
I assume you want to complete package, with build tools and everything. That gives you the option to customize, change themes, etc.
These are the problems I see:
Semantic UI uses Gulp 3.x, which is the official version, while Aurelia CLI uses Gulp 4, which is in alpha. This gives errors if you try to npm install Semantic into an Aurelia project.
Importing the CSS/JS files in aurelia.json only works with the node_modules/semantic-ui/dist version -- not the built semantic/dist version, which means your customizations don't get included.
My solution/workaround:
Install Semantic UI in a separate folder, e.g. aurelia_project_root/SUI. Solves Gulp version problem. You can now gulp build your Semantic distro from within that directory. Note: You need to create the folder outside of the Aurelia project, then move it inside as a sub-folder the Aurelia project root. This gives you a local version of Gulp inside the SUI/node_modules.
Edit aurelia.json to add SUI and JQuery:
"jquery",
{
"name": "semantic-ui",
"path": "../SUI/node_modules/semantic-ui/dist",
"main": "semantic.min.js",
"resources": [
"semantic.min.css"
]
}
To install JQuery: npm install jquery --save.
Edit semantic.json inside SUI to change the output directories to save the built files in the node_modules:
"output": {
"packaged": "..\\node_modules\\semantic-ui\\dist\\",
"uncompressed": "..\\node_modules\\semantic-ui\\dist\\components\\",
"compressed": "..\\node_modules\\semantic-ui\\dist\\components\\",
"themes": "..\\node_modules\\semantic-ui\\dist/themes/"
},
This is because of problem 2 - that Aurelia CLI only is able to import SUI as long as it is within node_modules (probably something I do wrong).
Then the workflow becomes:
change SUI properties
build SUI (gulp build inside SUI/semantic)
build/run aurelia (au build)
Of course, you can update your gulp tasks in aurelia to improve this workflow.
You'll also need to link or copy fonts/pngs. For now I've just symlinked it, ln -s path-to-dist/themes themes from you Aurelia project folder.
Your HTML:
<require from="semantic-ui/semantic.min.css"></require>
...
<select ref="states" class="ui fluid search dropdown" multiple="">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
...
</select>
Code-behind:
import * as $ from 'jquery' // import $ from 'jquery';
import 'semantic-ui';
attached() {
$(this.states).dropdown()
}
This should give you a very cool drop-down.
Related
I'm doing some UI dev in an Angular 2 (v4) project and currently have to re-run ng serve... to recompile the new styles, in order to get them to display in the app.
Is there a way to get the CSS styles to auto-compile in the same way adding html tags to a given component updates the app realtime?
It should automatically do that while serving.
Please provide more details.
Try disabling Use "safe write" in Settings of your IDE if that's a thing. It might cause that problem incidentally ( Settings | Appearance & Behavior | System Settings in Jetbrains problems)
Change Angular CLI version?
Check out your .angular-cli.json could be something in there.
There is two ways to add css file to your project:
one way add the css file to assets folderthen import the file from style.css like this
#import url('./assets/theme.css');
in this case the file will be watch to change
another way from angular.json add the css file to styles array
"styles": [
"src/assets/theme.css",
"src/styles.css"
],
notes that any change on angular.json file required to run angular server againg
{{ 'Happy Coding' }}
it looks like everything in the clientapp folder is compiled into javascript and bundled into main-client.js using webpack, probably. i don't know much about it.
what i'm wondering is, if i have some javascript and css that isn't strictly part of the angular app, where in the project do i add these dependencies. do i add it in the dist folder? it looks like that folder is dynamically created by webpack so i didn't want to do that.
for example, the default angular app it installs clearly uses bootstrap for css grid system classes, so bootstrap must be installed somewhere. is it in the webpack config? how would i go about adding any other third party assets or my own?
thanks for any clarity about using this template
According to this blog by Steve Sanderson, who is apparently the author of this template you are referring to, the intended order of operations to add third party node modules is:
Add the module to your package.json file, save and then restore npm packages,
Add the item to the vendor array in webpack.config.vendor.js (which is the same as adding the item to the nonTreeShakableModules in the same file as Mike_G mentioned),
Run webpack --config webpack.config.vendor.js to repack your new assets. Make sure to install webpack with npm before this step.
It may be worth mentioning that Steve says that in step number 2, if what is being added is a css asset, the full path within node_modules and extension are needed, i.e. font-awesome/css/font-awesome.css, but if you are only including a Javascript library, then just the name of library will suffice, i.e. moment for Moment.js.
Well since webpack is being used, there is no way of adding any JS or CSS code inside that budnle.js file.
You would have to create you code before the packaging is being run.
The other way is to create your files and import them manually in t he index.html file.
This is ad hock way of doing stuff, but only in case that you need to add some CSS code to your project and not having knowledge of angular/webpack stuff.
As for JS code, its nearly impossible to add anything like that, since html code is also compiled and sent into bundle.js.
You can use two ways:
1) use angular/cli. In .angular-cli.json you can find:
"styles": [
"styles.css"
],
"scripts": [],
here you can add any custom css or js file.
2) work with static files:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files
in this second way you can set a specific folder, add any custom file css or js and link to it from _layout.cshtml file.
hope this help u
I am trying to import the .css from full-calendar package.
First, I created a new component my-calendar (html, scss, ts).
Then, I tried 3 different ways but only the last one worked for me:
Reference the file directly, as the documentation suggested, in the index.html (it does not work because the reference to node_modules is lost when you build the project)
<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
Adding #import "~fullcalendar/dist/fullcalendar.min.css"; in my-calendar.scss. If I am not wrong, this should add the style into main.css when the project is being built (is not working)
Create custom copy config (copy.config.js)
module.exports = {
...
copyFullCalendar: {
src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'],
dest: '{{BUILD}}'
}
}
and adding #import "fullcalendar.min.css"; into my-calendar.scss
UPDATE:
and adding #import "fullcalendar"; into my-calendar.scss
to avoid compiler errors when use ionic build --aot --minifycss --minifyjs
I would appreciate if someone could clarify the best way and explain if I misunderstood some concept.
PS: Remember that I am working with Ionic3 and I am not using the Angular CLI.
third method of yours will be the best way to implement , but it can be done in another way more like ionic.
You need to make use of the includePaths when configuring the custom path , as we are dealing with custom css, add sass.config.js to local project folder where we configure custom includePaths like this
includePaths: [
....
'node_modules/ap-angular2-fullcalendar'
],
In package.json scripts to include custom css configuration file, like this:
"scripts": {
.....
"ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
},
Only problem with this implementation is when you update ionic-app-scripts you have to compare the native sass.config.js file to the local file and check if there is anything changed.
This is a troublesome method and an issue was raised in Github but unfortunately they closed the issue with the following justification
Configs are extended, so only include the fields that you're changing.
Everything else will inherit the defaults.
As of #ionic/app-scripts : 3.2.0, it seems you'll still need to
#include FILE; somewhere
See this closed issue on app script's github
I found that as of
'Ionic Framework : ionic-angular 3.9.2'
you have two choices insert your import in src/theme/variables.scss or src/app/app.scss.
For example in variables.scss
/* some declarations here */
#import 'insrctest';/*file sits in src/test/insrctest.scss*/
And in my custom.config.js
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */
I was tired of downloading js and css lib manually every time, then I jump into npm and webpack as I started a react project. But there are some awkwark:
Using npm install is fine, but I have to know where css/js/scss placed, they may be :
node_modules\materialize-css\sass\materialize.scss
node_modules\materialize-css\dist\js\materialize.min.js
node_modules\sweetalert\dist\sweetalert.min.js
node_modules\sweetalert\dist\sweetalert.css
node_modules\hint.css\hint.min.css
...
I still need found the correct path by myself, and add to index.html or import at index.js, like before , but it does reduce the time for searching lib's download link)
There are many js lib contain css file, but webpack is not so easy to add a lib with both css and js:
Such as webpack-import-bootstrap-js-and-css, have to add so much config code to make css import, why don't I just include the css at index.html? It just one line. However separate js,css import in different file make me feel uncomfortable too.
I hope there is a way like:
npm install --save sweetalert
add webpack config, something like(no need to know structure of a lib ):
...
new webpack.ProvidePlugin({
swal: "sweetalert",
use_css: true, // false for someone need custom theme
use_js: true
}),
...
But I don't found a good way now.
You can provide path to the .css file. This works for me:
import swal from 'sweetalert'
import 'sweetalert/dist/sweetalert.css'
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.