I have an Elixir/Phoenix application in which I use brunch and npm. Since all css files are compiled into app.css and I want to not compile them all but only some of them, and include ones that aren't compiled manually on certain pages, I wonder, is there any way to do that?
In a brand new Phoenix 1.2 app, here's how to setup /css/app.css to contain all files except web/static/css/foo.css and web/static/css/bar.css, /css/foo.css to contain only web/static/css/foo.css, and /css/bar.css to contain only web/static/css/bar.css:
Modify brunch-config.js's stylesheets: object to the following:
...
stylesheets: {
joinTo: {
"css/app.css": [/^web\/static\/css\//, "!web/static/css/foo.css", "!web/static/css/bar.css"],
"css/foo.css": "web/static/css/foo.css",
"css/bar.css": "web/static/css/bar.css"
},
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
...
Then, in the views, you can include these files separately like this:
<link rel="stylesheet" href="<%= static_path(#conn, "/css/app.css") %>">
<link rel="stylesheet" href="<%= static_path(#conn, "/css/foo.css") %>">
<link rel="stylesheet" href="<%= static_path(#conn, "/css/bar.css") %>">
Related
I have been learning Laravel (8) and have enjoyed working with tailwindcss. That said there are some things I still wish to use Bootstrap for. I am having trouble locating documentation on how to set up bootstrap with laravel mix in laravel 8. More specifically, in the resources/css/app.css file we put the following for tailwind:
#tailwind base;
#tailwind components;
#tailwind utilities;
but Im not sure what would go here for bootstrap.
I noticed older versions of laravel used php artisan ui bootstrap but that is not available in Laravel 8 from what I have seen.
Run: npm install --save-dev bootstrap jquery popper.js
How your webpack.mix.js should look:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
How your app.scss should look:
#import '~bootstrap/scss/bootstrap';
How your app.js should look:
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');
This is how you could use generated files in your .blade.php files:
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>
If you want to customize Bootstrap, copy node_modules/bootstrap/scss/_variables.scss to resources/sass/_variables.scss, change variables you want and change your app.scss to:
#import '~bootstrap/scss/functions';
#import 'variables';
#import '~bootstrap/scss/bootstrap';
You have some helpful documentation on https://getbootstrap.com/docs/4.0/getting-started/webpack/
Laracasts is also quite helpful.
use this steps
npm install bootstrap
npm install #popperjs/core
npm install sass#^1.32
npm install sass-loader
For Bootstrap Sass files, let's create the “scss” folder in /resources and then a new app.scss file in /resources/scss/. Then insert the following line to the /ressources/scss/app.scss file
#import "bootstrap";
For Bootstrap JavaScript, insert the following line to the /resources/js/app.js file :
import "bootstrap";
To compile Bootstrap JavaScript and Sass files with Laravel Mix, you need to edit the /webpack.mix.js file as follows:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
now you can run you command
npm run dev
Now that we have the /public/css/app.css and /public/js/app.js files with Bootstrap included, we can include them on a page (template Blade) via Laravel's asset helper () to use the Bootstrap components
On your Head
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
On your footer
<script src="{{ asset('js/app.js') }}"></script>
now i think he will work enjoy
Seems to be available in Laravel v8.24.0 though.
Be aware that doing this procedure do regenerate the webpack.mix.js.
Steps are:
install laravel ui: composer require laravel/ui
generate scaffolding: php artisan ui bootstrap
optionnaly generate the same for auth: php artisan ui bootstrap --auth
make npm install required packages: npm install
compile assets: npm run dev or npm run production (for development or for production)
Then make sure to have the following in your blade templates:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
How can I config Vite build to output with script type="text/javascript"
I'm using Vite 2.7.2, when finished building the code in HTML output the script tag as follow
<script type="module" crossorigin src="/assets/index.0c37d7b4.js"></script>
What I want is
<script type="text/javascript" crossorigin src="/assets/index.0c37d7b4.js"></script>
The code run fine with type="module" but when I manually replace it with type="text/javascript" the code break and output following error
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
Here is the original code before building
const elements = {
root: document.querySelector('#root'),
};
elements.root.innerHTML = `Loading...`;
The reason I want the type to be type="text/javascript" because Shopify platform only accept script with type "text/javascript"
I'm very new to svelte ( like many of us ^^ ), and I didn't manage to add bootstrap to my app. Tried to run 'npm add bootstrap' but it said that I need peer jquery dependencie. Here is the terminal render
What I don't understand is why the package has been added and I can't still use the bootstrap classes. Second point, why does it talk about peer dependencies? What's the link here?
I don't know if I'm missing something but if you guys got the solution it will help a lot. Thank you
npm add bootstrap
npm WARN bootstrap#4.4.1 requires a peer of jquery#1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN svelte-app#1.0.0 No repository field.
npm WARN svelte-app#1.0.0 No license field.
+ bootstrap#4.4.1
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```
Your problem is that installing bootstrap into node_modules doesn't automatically include the files in your application. There are a few different ways you can accomplish this.
Option 1: Copy the files to /public manually
Download the bootstrap files and place them inside the public folder of your svelte project.
Add the css link in public/index.html. <link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>.
The downside of this approach is that you will need to commit the bootstrap folder to your version control system, which is generally frowned upon.
Option 2: Copy the files to /public using rollup
install rollup-plugin-copy
Update rollup.config.js to include the copy plugin. Here is a snippet of the important parts from a rollup.config.js file from a fresh svelte install.
//...
import copy from 'rollup-plugin-copy'
export default {
//...
plugins: [
//...
copy({
targets: [{
src: 'node_modules/bootstrap/dist/**/*',
dest: 'public/vendor/bootstrap'
}]
}),
//...
],
//...
};
Add the css link in public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
This answer is an addition to the accepted answer's second option. (I cannot comment yet..)
Instead of copying all of Bootstrap's files to the public folder, you can also pick and choose. For example, I only needed the minified CSS and the bundled minified JavaScript, so I configured the copy plugin like this:
//...
import copy from "rollup-plugin-copy";
export default {
//...
plugins: [
//...
copy({
targets: [
{
src: "node_modules/bootstrap/dist/css/bootstrap.min.css",
dest: "public/vendor/bootstrap/css",
},
{
src: "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
dest: "public/vendor/bootstrap/js",
},
],
}),
//...
],
//...
};
The CSS can be included in the <head> tag in public/index.html:
<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
The JavaScript can be included inside of the <body> tag (at the end) in public/index.html:
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
There is also sveltestrap as one of the Svelte Society design systems
I successfully added Bootstrap 5 to my Svelte project, here is how to do this:
You need to have Svelte project, see for Svelte and for SvelteKit
Enter the project directory.
Run npm install or yarn (if you prefer yarn) to download dependencies listed in package.json.
Then add Bootstrap with npm install bootstrap (or npm i bootstrap) or yarn add bootstrap. You can specify version if you want. Its folder will appear among other dependencies in node_modules.
Since Bootstrap requires popper.js and jQuery we also need to add them:
npm i #popperjs/core jquery.
Now that we have Bootstrap installed (its source code is in node_modules folder) we need to link it to our application. Since Svelte app is basically an html page we can simply add links to Bootstrap CSS and JS in src/app.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Using aliases for node_modules is not preconfigured in vite.config.js by default.
That's it, this worked for me.
I am using Vue 2.0 and Vue CLI 3.0. I am trying to get the favicon.ico/png file work properly and am having no luck at all.
I have narrowed the issue to the following.
The index.html file generated by yarn build converts this line of html code:
<link rel="icon" href="favicon.png" >
to...
<!--[if IE]><link rel="icon" href="favicon.png"><![endif]-->
If I go into Chrome developer tools and change the line back to the way I had it originally, the ico/png file renders as expected.
My question is: how do I fix this so that yarn build stops messing up my html code.
Inside the vue.config.js set the PWA options for the icons to point to whatever icons you want. Specifically, set pwa.iconPaths for example:
module.exports = {
pwa: {
iconPaths: {
favicon32: 'img/icons/myFavicon.png',
}
}
}
See
https://cli.vuejs.org/config/#pwa
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
I am using browserify to move a reusable typescript module into the browser using gulp.
gulp.task("default", function(){
return browserify({
basedir: '.',
debug: true,
require: ['./src/common/common.ts'],
fullPaths: false,
cache: {},
packageCache: {}
}).plugin(tsify)
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
});
To my surprise I need to include the resulting common.js file via
require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
In typescript or in builds using UMD + require JS I require files using relative paths without problems with exactly the same code. In the moment I add browserify I get absolute paths. I tried compiling typescript myself and use browserify without tsify but it always demands an absolute path to include it. All other modules that require common.js will fail to find it. How can I fix this?
Edit: Example how it looks like in the html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="common.js"></script>
</head>
<body>
<script>
console.log("script started");
//works
var test = require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
test.printCommon();
//fails (all other modules will try to find it at this path)
var test2 = require("../common/common");
test2.printCommon();
</script>
</body>
</html>
While I couldn't find the root of the problem I found a solution that works:
var brofy = browserify({
basedir: '.',
debug: true
});
brofy.plugin(tsify);
brofy.require("./src/common/common.ts", { expose: "../common/common" });
brofy.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
The property expose will make sure that require("../common/common") leads to the correct module avoiding any absolute paths and allowing me to use the same paths I use in typescript.
Other bundles can reference the bundle using "brofy.external("../common/common");" to tell browserify to not include it in their own bundle and rather use require to find it.
Edit: Still hoping someone comes up with a better solution.