How can I properly install Twitter Bootstrap into my meteor project?
I know I can do meteor add bootstrap but I can't customize the variables (ie colors and the sorts). I've also looked at nemo64:bootstrap but same issue, I can only include and exclude modules of Twitter Bootstrap but not the variables.
How can I properly include Twitter Bootstrap and have access to the variables.less ?
In order to control the order in which Meteor loads .less files you need to add .import.less to the file extension. If you import the bootstrap less files into your project and rename them, you will have finite control of all the mixins and variables. Here is a great post that summarizes this. http://www.manuel-schoebel.com/blog/meteorjs-and-twitter-bootstrap---the-right-way
Related
Preact guide says
To alias any package in webpack, you need to add the resolve.alias section to your config. Depending on the configuration you're using, this section may already be present, but missing the aliases for Preact.
But using any of the official templates (default, typescript, material web components, etc...) doesn't generate any webpack.config.js file and preact has no eject command like react to access the full project configuration.
So, few things:
Firstly, Preact and Preact-CLI are two separate items.
You're quoting the section from our docs labeled "Integrating into an existing pipeline". This means adding Preact to an existing React application of yours, but, if you're using one of our templates, then this is a new project, not an existing one.
preact has no eject command like react to access the full project configuration.
There is no way to "eject" React. What you're referring to is the build tool called "Create React App".
We do allow for full configuration of the Webpack config with a preact.config.js. With this, you can edit any parts of the config that you'd like: change plugin options, add loaders, remove plugins, etc., without owning the configuration yourself. You can just comment out your changes in your config and you're back to the default config.
We believe CRA's "eject" is a poor API and therefore don't match it.
I'm considering using Stream Chat in my React app, but would like to implement a few of my own customizations to the React Components' styles.
I see the Sass source code on Github, which looks approachable, and seems that it would be fairly easy to tweak. However, these source files aren't included in the published stream-chat-react npm package; only the pre-compiled index.css stylesheet is distributed.
I would like to avoid writing ad-hoc CSS rules to override the provided styles. Is there a recommended way of achieving some UI customizations, ideally working with Stream's source Sass files?
The best way to approach this is to get the source files from the repository and building the css yourself. I have added some scripts and a section in the README on how to do this easily.
I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.
GET http://localhost:8080/jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js # angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js
I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.
What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?
I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.
I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.
In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.
This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:
import 'sysadmin/app/tinymce/themes/modern/theme';
I'm building an app that will contain many js (jquery) modules (files) using the following setup;
The build is run using Grunt task runner.
I use handlebars templates, then generate the html from *.hbs files.
During the build, I uglify all the js files into one minified file.
I call the minified file in my application <script src="assets/js/app.min.js"></script>
Now, I want to use requirejs to organize my code and adhere to the AMD specifications..
But I got 3 problems with this approach:
I need to have 1 single minified file for all the js; this keeps my code harder to "decode" thus to copy (since it is mixed with other dependencies; jquery, modernizer..) and also helps avoid extra http requests if scripts are called individually.. However, requirejs needs a main file to initialize the app and inside that main file It calls the other required files.. I don't have such configuration.
Many of the dependencies I'm using are in a bower package (that I don't include in the distribution); this makes it not possible to call those files using the suggested requirejs method.
I'm using jquery on this with some 3rd party plugins that don't call define(); to make them work I have to use shim config which again rises the problem #2!
So how am I supposed to take advantage of requirejs while keeping my code in modules and well organized?
Sorry for the long question and thanks for reading :)
ps: Feel free to change the title of the question as I couldn't find a better one!
I finally opted for AngularJS as it adheres to my setup above and allows me to split my app into manageable small modules.
I have also the possibility to use the ease of jQuery (even though it is not a best practice among angular community) and much more.
I'm using node.js and backbone for a web app. Backbone is part of my package requirments. I've used Rails and Backbone before, and the helper gems are nice for piecing together all the assets (js files) that need to get to the client.
With that said, I had to manually download backbone.js and manually add it and all the other supported js libraries in the header of my app's layout file.
Should installing the backbone module get me away from that manual effort to create the required source for my client app? Is there some kind of jammit/asset pipeline?
you should simply npm install backbone in your main directory, this way all the submodules you use will find this exact backbone, and will use it
moreover, this way you can easily extend backbone with additional submodules
I use the stitch package to serve my scripts in node apps. With that, it's as simple as listing backbone.js as a dependency, and I install it with npm. That's convenient.