How can I add lattest Zurb Foundation framework to Laravel 5.5? I want to change default Bootstrap framework to Foundation.
This is how I add the lattest Zurb Foundation framework to Laravel 5.5.
Hope it will help somebody.
Open package.json and remove bootstrap entry and then install lattest foundation-site version using npm:
npm install foundation-sites#latest --save-dev
Then go to resources/assets/sass/app.scss
You can import settings here if you have your own, if not you just need to import foundation.scss with default foundation settings:
#import "~foundation-sites/scss/foundation.scss";
#include foundation-everything(true);
Next step you need to go to node_modules/foundation-sites/sass/foundation.scss and do that steps:
Uncomment there a default settings import block which can be found at row number 18 or 20.
Then swap that settings import block with util import block placed right below the first one, because settings.scss needs util therefore it should be placed before.
Then go to node_modules/foundation-sites/sass/settings/_settings.scss, find there a default util import block at row number 63 and comment it. You do this because util imported before, so you aint need to duplicate that import.
Then go to resources/assets/js/bootstrap.js and change
require('bootstrap-sass');
to
require('foundation-sites');
$(document).foundation();
You don't need to change anything in webpack.mix.js
Related
I tried to reinstall the package but still the problem is not fixed.
react-bootstrap is not shipped with any bootstrap-css:
https://react-bootstrap.netlify.app/getting-started/introduction/#stylesheets
Because React-Bootstrap doesn't depend on a very precise version of
Bootstrap, we don't ship with any included CSS.
Install bootstrap as well and then put this in your App.jsx for example:
import 'bootstrap/dist/css/bootstrap.min.css';
Or link to CDN package.
I am setting up a Snowpack project with the aim to move an existing Create-React-App application into it once things are configured the same.
I haven't found a way to import an .scss file into a .tsx file however.
The Snowpack docs only seem to discuss configuring scss as an externally built asset, suggesting putting your scss into a separate css folder { docs link }. However I would like to keep my scss files next to the tsx components they belong to, and import them into the component as I currently am.
The docs also reference a blog post discussing a setup with PostCSS, however that post suggests some issues with the approach, including that sourcemaps wouldn't work - which isn't going to fly.
I have created my project like this:
npx create-snowpack-app my-sweet-app --template #snowpack/app-template-react-typescript --use-yarn
I've then added a new scss file, src/test.scss
$best-colour: tomato;
body {
background-color: $best-colour;
}
and added an import in my src/App.tsx file:
import './test.scss';
When running yarn start I get the following error:
[error] [404] /_dist_/test.css.proxy.js
✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
✘ /home/me/repos/my-sweet-app/src/test.css
Can Snowpack be configured to import scss files into tsx files equivalent to how it works in Create React App? How?
While I have not a complete answer, I faced the same problem as you. What you basically want to achieve is, to add additional tools to Snowpack's build pipeline.
If you throw in Babel with Snowpack you can add arbitrary absurd babel plugins for all your transformation needs.
Using #researchgate/babel-plugin-transform-scss-import-to-string and adding it in my babel.config.js I was able to get my Sassy stuff transpiled into strings.
However, this is not a complete solution; because now Snowpack won't pick up changes in my Sass files... :( It seem's that a lot of those new anti bundlers are just that, they are against bundling and thus combining them with additional pre-processing stuff that used to be done by our good olde bundlers is cumbersome.
I have been trying to add opencv in my xcode project.
I can successfully add opencv through pod like explained here https://cocoapods.org/pods/OpenCV
However, once installed, I cannot do
import CV or import OpenCV
In fact when I just type import c it doesn't give me any code hint for open cv. That means opencv is not installed properly.
My Question
Do I still need to add header file even I have added the framwork via pod?
While I had added facebook from pod, I didn't need the header file.
No , When we use framework with pod then we need not to add header file in the project. Just run your project once after installing pod then you can import open cv in your project also Xcode will give hint.
I'm using CodeKit 2.1.8
I was using Foundation 5.4.6 but got in to some problems and updated to 4.5.7 now I still have some problems but different ones.
I was using Sass version 3.4.7 but downgraded to 3.2.19 after reading this could help. This did not help so I updates back to 3.4.7.
Right now my problem is as follows:
I have foundation installed through CodeKit. I did not alter die bower component files, everything is as is.
I have two projects accessing the bower component folder. My folder structure is as follows:
zurb-foundation
bower_components
dsl
css
img
js
scss
index.html
header
css
img
js
scss
index.html
.bowerrc
bower.json
config.codekit
package.json
The Sass files in both the dsl and header folder are completely identical. But they compile different.
Right now the dsl app.css file has about 15000 rows where the header app.css file has about 5000 rows.
I compared them and there are a lot of differences. All of the styles and components get loaded but it looks like the styles get multiple times in the dsl/app.css. Another difference is that the header folder has no sass-cache folder but the dsl folder has got a folder called sass-cache.
So there are some compilation differences does anyone has encountered this before?
Thank you
I also posted this question in the Foundation forum. Rafi Benkual provided me with this answer:
Have you tried Libsass? Here is the recommendation from Codekit:
Sass Update
"Keep using Libsass to compile Sass files in a Zurb Foundation project because the latest Ruby Sass compiler (3.4.5) is not yet supported by Foundation. This should clear up in the next few weeks. See the link in the 2.1.7 release notes, below, for more information."
In CodeKit 2 you can find "Use the libsass compiler" checkbox under "Other options:" on the .scss file's settings panel (on right).
This worked for me.
I've installed SASS version and i have the _settings.scss file which is all are
commented.
How can i do some settings or some modifications here?
Shall i remove the comments and recompile?
Thanks.
Yes it's how you do this. And if you need some in depth changes then instead of importing foundation in app.scss file you can import elements individually(most likely you don't need all of them) so you can modify components separately while all other components will load from foundation gem and update.