I am using grunt build to copy files from production to build. While working I am using local bootstrap css, however in build I need CDN url to be replaced for bootstrap.
<!--build:css http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- endbuild-->
First of all is this possible? Grunt build is giving error for http path while using usemin.
Thanks.
Got temporary solution to this.
My grunt build was perfect except http:// url for bootstrap. So i used --force (grunt build --force) command to build my project.
This gave me warning but build the project as per my requirements and CDN url for bootstrap.
Related
I'm getting crazy with this matter and seems i can't find a solution.
I started a laravel project and i'm unable to get the css working correctly.
I have created a new file named style.css in my resources/css, than i have linked that file to my app.css with #import 'style.css';.
The app.css is linked in my app.blade.php with <link href="{{ asset('css/app.css') }}" rel="stylesheet">
Everything seems fine to my eyes, but the css in style.css doesn't work.
I've tried any solution that i know, and also looked several web pages and other older projects done but everything seems correct, probably is just because i'm really tired.
Does any one can help me to solve it?
Thank you
The path of the method asset() ends in the public folder
you need to compile app.css by run this command "npm run dev"
if don't install npm before run "npm install" first
I've just done a fresh install of the latest Symfony version. Inside my templates folder I've created a new folder called website which contains a base.html.twig and a home.html.twig.
File structure: templates/website/base.html.twig
Inside my public directory I've created the following css/app.css. Now in my base I've done:
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">
Inside my stylesheet I'm just setting the body background colour to red so I know it works. For whatever reason it isn't loading my css. When I view source it appears as:
<link rel="stylesheet" href="/css/app.css" type="text/css">
and clicking the href I just get a Symfony 404. I cannot figure out why it isn't loading my static CSS file.
I don't want to use Symfony Encore as thats overcomplicating things for my project. I have also tried assets:install command and nothing installed or changed.
UPDATE:
I installed and done a basic setup with Symfony Encore in the hope I could at least get some CSS working. Still get the exact same issue.
If you want to use the asset funtion you have to install the component first with the following command:
composer require symfony/asset
That is really all there is to it if you do not wish to use webpack encore.
Optional: If you happen to use PHPStorm with the Symfony plugin, go to settings > symfony and change Web Directory from app to public for the new directory that Symfony 4 uses. This gives you all the autocomplete goodness and your references will work.
You should store your static files inside the assets directory at the root of your project. So just place the css-folder with the app.css-file in <root>/assets/css/app.css
Source: https://symfony.com/doc/current/best_practices/web-assets.html
My dev server is running on node live-server. My prod will be a LAMP server.
I have normalize.css inside my node_modules server.
In my index.html I have
<link rel="stylesheet" href="/node_modules/normalize.css">
<link rel="stylesheet" href="css/styles.css">
I don't want files linked to node_modules directory.
I want something like
<link rel="stylesheet" href="css/normalize.css">
Is this doable? I have lot of other css and js files like this.
Update 1
Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server.
There are lots of possible solutions. I can suggest using a task runner(gulp) which will copy these static files to a public directory like dist/assets.
Install gulp on your machine
npm install --save-dev gulp
Create a gulpfile.js file in your root directory with following code.
var gulp = require('gulp');
gulp.task('default', function () {
gulp.src('/node_modules/normalize.css')
.pipe(gulp.dest('./dist/assets'));
});
Run gulp
gulp
Update your index.html as below
<link rel="stylesheet" href="/dist/assets/normalize.css">
Please go through the documentation of Gulp for more information
You can also try Grunt or Webpack
You could use Webpack for bundling, which would copy css resources to the dist and replace references to it. It doesn't support html files as entry points though, so you'd need to work around that by probably using html-webpack-plugin.
anyway, as was mentioned by others - server decisions are weird.
how to make semantic ui framework "right-to-left" supported ? is there
anyway to make it rtl support in installing steps or not ?
You can enable RTL support under the following scenarios:
1. Fresh Installation
go to the document root of your project and install semantic-ui through npm
npm install semantic-ui --save
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
in your terminal change directory to semantic directory
cd semantic/
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder, now a very important final step is to reference the RTL version of semantic-ui css file in your index.html or web page as following:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
2. Existing Installation
in your terminal change directory to semantic directory
cd semantic/
Clean the destination folder using the gulp task provided by semantic-ui framework
gulp clean
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder.
Now you need to replace the reference in your html page from
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">
to
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
first:
navigate to your project root and then fire: npm install semantic-ui --save
and wait for all done.
second:
edit semantic.json file (located in project root) and change "rtl": false to "rtl": true
third:
navigate to semantic dir(cd semantic) and fire: gulp build and then gulp watch.
Or if you where not installing it by npm and gulp, you may get the rtl versions from RTLCSS website. They also provide a cdn, or you can download the css and js file and use them in your sources.
I'm new to Yeoman. I've generated an Ember.js project with
$ yo ember
so I needed to install Twitter Bootstrap separately running
$ bower install bootstrap
but running
$ grunt build
does not deploy the component css files to the dist/styles directory in the same way that it does for js files to dist/scripts
How do I include component css files in my project distribution and reference them in my html?
When you are integrating the css in your html files you usually do it like this (I use bootstrap as example):
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
If you run grunt buildthis won't deploy the css files. To have them deployed in your project wrap it in the usemin comments, just like you do with the javascript stuff:
<!-- build:css styles/bootstrap.css -->
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
<!-- endbuild -->
This will then deploy this css file as styles/bootstrap.css in your dist folder and update the references in your html files just like it does with the javascript references.
I recently added support for Twitter Bootstrap to the generator, so if you upgrade to the latest version you will get a prompt for it.
In general, if you want to reference components, you should not copy them around to the styles or scripts folder but link directly to the components folder, e. g.
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
Otherwise, you lose all the benefits of using a package manager except for the easier initial installation.