After I run composer require zurb/foundation how do I reference the foundation file in my vendor directory #import foundation always says that the file is not found and it doesn't look like laravel mix has the option to includePaths like elixir did in previous versions.
Almost everything I see online installs foundation with npm is that the preferred way? I have nothing against using npm but when I run "npm run production" it fails due to string literals "`" because uglifyJs does not support ES6. I am trying the composer version because I believe that it already has the js compiled so I wont have to do anything hacky to get that to run in production.
I was able to find the answer to this problem myself. You have to copy the foundation files to the appropriate resources/assets folder and then reference them from there. I set the third parameter to false because by default it collapses the files.
.copy('vendor/zurb/foundation/js', 'resources/assets/js/foundation', false)
.copy('vendor/zurb/foundation', 'resources/assets/sass/foundation', false)
Then reference the foundation files like so for scss: #import ./foundation/scss/foundation;
I was actually able to get foundation working with the npm package. By adding the webpackConfig it excludes the foundation folder from being uglified in production.
if (mix.inProduction()) {
mix.webpackConfig({
output: {
chunkFilename: 'js/chunk-[id]-[chunkhash].js'
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules(?!\/foundation-sites)|bower_components/,
use: [{
loader: 'babel-loader',
options: Config.babel()
}]
}]
}
});
}
Related
I changed the webpack.config.dev.js and webpack.config.prod.js both in the config folder and in node_modules/react-scripts/config folder to allow for CSS modules like this:
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: require.resolve('style-loader'),
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
When I run my app in dev mode with npm start it works just fine and the CSS modules apply correctly.
However, when I build my app and deploy it to Firebase the CSS styling disappears.
Is this a common issue? How can I solve it?
If you upgrade to react-scripts version 2 you don't need to eject in order to make this work. The build will automatically work with css modules. I would recommend upgrading your react-scripts to v2 using yarn upgrade react-scripts#latest
Then rerun yarn build and see if the deploy works properly. You won't need to modify your webpack configuration for this.
I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.
I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.
Code in SASS file (resources/assets/SASS/banners.scss)
section.module.parallax-1 {
background-image: url('../images/banner1.jpg');
}
Compiled with mix in (app.css)
section.module.parallax-1 {
background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}
So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.
I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?
webpack.mix code / js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs
You can use the following fix:
in webpack.mix.js add
mix.options({
processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});
Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.
(Same as where the webpack.mix.js is)
Find and remove this string from your new webpack.config.js file
{ loader: 'resolve-url-loader' + sourceMap },
When thats done you have to update your npm scripts to use your webpack.config.js file.
In your package.json use these scripts instead
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
i'm starting a new project using reactjs ES6 and webpack
using react-static-boilerplate starter question is how can i import bootstrap4 into the build proccess ?
i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its #variables and apply my theme etc.
i started project by cloning boilerplate
> git clone -o react-static-boilerplate -b master --single-branch \
https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install
installed bootstrap using npm
npm install bootstrap#4.0.0-alpha.3
now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?
First of all you need to download proper loader for scss
Install sass-loader
npm install sass-loader --save-dev
Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done
{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}
If you got error regarding node-sass
If you got error like cannot resolve node-sass then install
npm i node-sass --save-dev
Now if you import bootstrap.scss webpack will bundle it for you
import "bootstrap/scss/bootstrap.scss"
How to customize it
Example in your own scss file
$btn-font-weight:bold;
and then import the component you want to override or the whole bootstrap.scss
#import '~bootstrap/scss/bootstrap.scss';
In my case style.scss
$btn-font-weight:bold;
#import '~bootstrap/scss/bootstrap.scss';
main.js
import "bootstrap/scss/bootstrap.scss"
import "./style.scss"
Hope this help you to achieve your goal!
I have created a demo app here
run npm install
and npm start
got to localhost:8080
Seems like the boilerplate doesn't use sass-loader, and doesn't look for .scss files.
So first off install npm i sass-loader --save
Then under the loaders part in the webpack config you should add something like this:
webpack.config.js
var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
// ...
loaders: [
// ...
{
test: /\.(css|scss)$/,
include: [
path.join(nodeModules, 'bootstrap'),
],
loaders: ["style", "css", "sass"]
}
]
// ...
};
Now, if you want to play around with bootstrap's .scss variables, you can do so like this:
styles/app.scss
$brand-warning: pink !default;
#import '~bootstrap/scss/bootstrap.scss';
and in your main.js put in the style import
import "styles/app.scss";
Also, I should mention, this seems very close to this answer
Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps. From the raw boilerplate, add bootstrap 4 with npm as you already did:
npm install bootstrap#4.0.0-alpha.3 --save
Then in src/styles/styles.scss you want to add a couple imports
#import "./bootstrap-custom";
#import "~bootstrap/scss/bootstrap";
This is essentially the same thing as #DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables. You can then copy out the variable names that you want to update. Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:
/*
* overrides for bootstrap defaults, you can add more here as needed, see node_modules/bootstrap/scss/_variables.scss for a complete list
*/
$gray-dark: #333;
$gray: #777;
$gray-light: #000;
$gray-lighter: #bbb;
$gray-lightest: #ddd;
npm install --save-dev sass-loader css-loader style-loader node-sass
on your webpack.config.js:
loaders: [
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
Not the OP's original framework (but that was a few years back). As of react-scripts#2.0.0 it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: https://facebook.github.io/create-react-app/docs/adding-bootstrap
I am trying to setup a basic ionic 2 leaflet app using ionic 2.0.0-beta.24 and leaflet 0.7.7. After starting the default project with
ionic start test --v2 --ts
if you open the ionic.config.js file you will see the message
Ionic CLI is no longer responsible for building your web assets, and now
relies on gulp hooks instead. This file was used for exposing web build
configuration and is no longer necessary.
If this file is executed when running ionic commands, then an update to the
CLI is needed.
If your version of the Ionic CLI is beta.21 or greater, you can delete this file.
In older versions of ionic 2 you would put the directories you would want to include in this file like this:
sass: {
src: ['app/theme/app.+(ios|md).scss'],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
},
Now i guess that isn't an option, so how do i bring in the css stylesheet i need, because doing #import "leaflet"; in app.core.scss errors out because it can't find the folder.
Any help would be greatly appreciated. I am able to use the Leaflet js library because i did.
npm install --save leaflet
typings install --ambient --save leaflet
The map is loading without an issue, but the tiles are scrambled which is a sign the css sheet is not loaded. If i put in a stylesheet link in it works without an issue, but i would prefer not to have to rely on a CDN.
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
Thanks.
So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.
The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:
gulp.task('sass', buildSass);
to
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
}
})
});
It solves my issue. I also needed to call #import "leaflet" in the page that needed the leaflet css.
I'm using grunt + bower + grunt-bower-task plugin to manage javascript library dependencies.
Say I have installed jquery with bower:
bower install jquery --save
and with grunt-bower-task:
bower: {
install: {
options: {
targetDir: './public/lib',
layout: 'byComponent',
install: true,
verbose: true,
cleanTargetDir: true,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
After running grunt bower, jquery will be copied to:
/public/lib/jquery/jquery.js
So the client will fetch jquery with url:
http://somedomain.com/public/lib/jquery/jquery.js
But I have question, what if I changed the jquery version?
Say I used another query version with bower, but it will still be copied to the same location and user will fetch it with the same url. If I have add cache-headers for it, user won't fetch new jquery.js code from server before expired.
How to fix this problem?
I think if we can add the version to the file name when running grunt bower, that will fix it, e.g.
http://somedomain.com/public/lib/jquery/jquery-1.8.js
But I can't find such functions in grunt-bower-task.
I would handle library versioning in the bower.json file. Yours should have the versions to be installed whenever you call the bower install command.. something like this
"dependencies": {
"angular": "~1.2.21",
"jquery": ">=2.1.1"
},
"resolutions": {
"jquery": ">=2.1.1"
}
But now they're all jquery.js regardless of the version. So now what you'd want to do is add some type of cache busting strategy which will force the browser to download the newest version of your scripts. There's tons of resource on cache busting javascript online, so I won't reiterate those here, but there are grunt tasks that can help you like this one
One slightly off topic suggestion I would make is to concat and minify your externals scripts into one js file and maybe another for your application scripts. As one or more of your external library change, the cache busting technique will force the browser to grab the latest version of your dependent scripts.