This is a part of my nuxt.config.js file:
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
// load bootsttrap.css from CDN
//{ type: 'text/css', rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' },
]
},
css: [
// this line include bootstrap.css in each html file on generate
'bootstrap/dist/css/bootstrap.css',
'assets/main.css'
],
In this case bootstrap.css included in each html file on nuxt generate.
For resolve it I comment line 'bootstrap/dist/css/bootstrap.css' in css section and uncomment rel stylesheet line in link section.
After this bootstrap.css file loaded from CDN and not included in html files. So, I think it not is very well idea.
How copy bootstrap.css from 'node_modules/bootstrap/dist/...' to '~/assets' on build, and after this, load it from here?
Steps to include bootstrap.css into a nuxt project:
1 .Install bootstrap-vue
npm i bootstrap-vue
2.Create the file plugins/bootstrap-vue.js and in it type:
/* eslint-disable import/first */
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
3.Add created plugin to nuxt.config.js:
plugins: [
'#/plugins/bootstrap-vue',
],
After these steps it should work and you can use bootstrap.
This is the simplest way I have found to include the regular Bootstrap version (not Bootstrap-Vue) in your Nuxt.js project. First, install Bootstrap from your Nuxt.js project directory (I'm using version 5.0.0-beta2):
npm install bootstrap
Then, in nuxt.config.js file, include Bootstrap's CSS and Javascript like this:
css: [
"~/node_modules/bootstrap/dist/css/bootstrap.min.css"
],
plugins: [
{ src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", mode: "client" }
],
Note the mode: "client" flag which indicates that the Javascript should only be run on the client. This prevents a ReferenceError: document is not defined error that happens because Bootstrap is not compatible with server side rendering.
For me the best way if you are using scss
As for me i create a sass directory inside assets directory in nuxt.
Then i add app.scss file inside sass directory i just created.
Then inside app.scss i import the following:
#import "bootstrap-variable-override";
#import "~bootstrap/scss/bootstrap.scss";
Then i do yarn add node-sass sass-loader --save
After that in nuxt.config.js i modify css array to include my app.scss
css: [
'#/assets/sass/app.scss'
],
This will compile whatever scss i will write and import in app.scss and provide as a compiled css.
But if you are bootstrap-vue then all you need to do is add this as modules:
modules: ['bootstrap-vue/nuxt']
Way to add Bootstrap 5 with nuxt.js:
If you don't want to do it manually by reading the following answer, you can simply clone my bootstrap 5 with nuxt boilerplate repository, click here.
Installation
npm install bootstrap#next
Note: The command will change, currently bootstrap 5 is in the beta version.
After installing the bootstrap, you will know that you need to install some loaders to compile Bootstrap.
npm install --save-dev sass sass-loader fibers postcss postcss-loader autoprefixer
Note: Installation of fibers is not mentioned in bootstrap documentation but synchronous compilation with sass (2x speed increase) is enabled automatically when fibers is installed.
Adding the CSS Part of Bootstrap and the Customized Bootstrap
At first, create a folder in your nuxt project’s assests folder and also create a scss file inside the created folder. Suppose, the folder’s name is bootstrap and the file name is ‘mystyle.scss’. Now, on this mystyle.scss file, you can override any built-in custom Bootstrap variables.
But you need to import bootstrap styles in this mystyle.scss too.After that, you need the following line to import bootstrap styles
#import "~bootstrap/scss/bootstrap";
Note: Make sure that you import this in the last line of your .scss file.
After importing the bootstrap style, you need to edit the nuxt.config.js
export default {
css: [ { src: '~/assets/bootstrap/mystyle.scss', lang: 'sass'}
],
}
This will not only compile the overridden bootstrap styles but also add the bootstrap style in the whole nuxt project.
Adding the Javascript Part of Bootstrap
First, download bootstrap. You will get a css and a js folder on that downloaded folder. There are many files under those two folders.
We just need one file from js folder. The name of that file is bootstrap.bundle.min.js. Copy that 'bootstrap.bundle.min.js' file and paste that file on your nuxt project's static folder. Then you need to edit your nuxt.config.js to use it.
export default {
script: [
{
src: '/bootstrap.bundle.min.js',
}
]
}
That's it, enjoy!
You can read about it in detail in my medium article, click here.
If you are looking to centralize your CSS imports (specifically bootstrap from node_modules, in your case) into a single file for Nuxt generating, you could include an at-rule import to your 'assets/main.css' (recommend to update it to '~/assets/main.css') specified in your config.
#import '../node_modules/bootstrap/dist/css/bootstrap.css'
Just a reminder: when you simply run Nuxt in dev mode, the CSS will be injected via JS. When generated, however, Nuxt will create a single, hashed, CSS file as part of the document root directory.
In my case, I put bootstrap.css file in "static" folder, and then register it to the nuxt.config.js as bellow
head: {
title: "Nuxt",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{
hid: "description",
name: "description",
content: "Nuxt"
}
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{ rel: "stylesheet", href: "/css/bootstrap.css" } //Register your static asset
]
},
Here is my setup, and this is for those who like to customize bootstrap default style:
In my assets/styles/_bootstrap.scss I have imported required style:
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
//#import "~bootstrap/scss/root";
#import "~bootstrap/scss/reboot";
#import "~bootstrap/scss/type";
//#import "~bootstrap/scss/images";
//#import "~bootstrap/scss/code";
#import "~bootstrap/scss/grid";
//#import "~bootstrap/scss/tables";
#import "~bootstrap/scss/forms";
#import "~bootstrap/scss/buttons";
#import "~bootstrap/scss/transitions";
//#import "~bootstrap/scss/dropdown";
//#import "~bootstrap/scss/button-group";
//#import "~bootstrap/scss/input-group";
//#import "~bootstrap/scss/custom-forms";
//#import "~bootstrap/scss/nav";
//#import "~bootstrap/scss/navbar";
//#import "~bootstrap/scss/card";
//#import "~bootstrap/scss/breadcrumb";
//#import "~bootstrap/scss/pagination";
//#import "~bootstrap/scss/badge";
//#import "~bootstrap/scss/jumbotron";
//#import "~bootstrap/scss/alert";
//#import "~bootstrap/scss/progress";
//#import "~bootstrap/scss/media";
//#import "~bootstrap/scss/list-group";
#import "~bootstrap/scss/close";
#import "~bootstrap/scss/modal";
//#import "~bootstrap/scss/tooltip";
//#import "~bootstrap/scss/popover";
#import "~bootstrap/scss/carousel";
#import "~bootstrap/scss/utilities";
//#import "~bootstrap/scss/print";
Just in case you like to change the default style of bootstrap then I created assets/styles/_bootstrap-variables.scss:
There are lots of variable that you can find in node-modules/bootstrap/scss/variables.scss, I am just changing a few.
#import url('https://fonts.googleapis.com/css?family=Cabin:400,500,700');
$font-family-cabin: 'Cabin', sans-serif;
$font-family-base: $font-family-cabin;
$primary: #b62f20;
$secondary: #e8e8e9;
$success: #87b4a6;
$info: #f0f6fc;
//$warning: #faeecf;
//$danger: $red !default;
//$light: $gray-100 !default;
//$dark: $gray-800 !default;
And import all my other styles and plugins in one file assets/styles/main.scss:
#import "bootstrap-variables"; // this should alway be on top
#import "bootstrap";
#import "my-other-style";
And finally, import the stylesheet in layouts/default.vue
<template lang="pug">
div
nuxt
</template>
<style lang="scss">
#import '../assets/styles/main';
</style>
In my case, I add it from CDN as an object entry to link array (in nuxt.config.js)
link: [
{rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'}
]
You install bootstrap-vue :
yarn add bootstrap-vue
Then in the nuxt.config.js file you add a module, and a separate config for importing the icons :
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
icons: true // Install the IconsPlugin (in addition to BootStrapVue plugin
}
And thats it.
For more configuration read the documentation here : https://bootstrap-vue.org/docs
(Read until the middle where it handles nuxt)
I used for Bootstrap v5
nuxt.config.js
css: [
'~/assets/scss/main.scss',
],
styleResources: {
scss: [
'~/node_modules/bootstrap/scss/_functions.scss',
'~/node_modules/bootstrap/scss/_variables.scss',
'~/node_modules/bootstrap/scss/_mixins.scss',
'~/node_modules/bootstrap/scss/_containers.scss',
'~/node_modules/bootstrap/scss/_grid.scss'
]
},
modules: [
'#nuxtjs/style-resources',
],
#nuxtjs/style-resources to have mixins, variables, grid available inside components:
https://www.npmjs.com/package/#nuxtjs/style-resources
example:
<style scoped lang="scss">
.header {
#include make-container();
}
</style>
main.scss
#import "bootstrap-configuration";
#import "bootstrap-optional";
#import "#/node_modules/bootstrap/scss/helpers";
#import "#/node_modules/bootstrap/scss/utilities/api";
#import "custom";
_bootstrap-configuration.scss
#import "bootstrap-required";
#import "#/node_modules/bootstrap/scss/utilities";
_bootstrap-optional.scss
(I can include only what I want)
#import "#/node_modules/bootstrap/scss/root";
#import "#/node_modules/bootstrap/scss/reboot";
#import "#/node_modules/bootstrap/scss/type";
#import "#/node_modules/bootstrap/scss/images";
#import "#/node_modules/bootstrap/scss/containers";
#import "#/node_modules/bootstrap/scss/grid";
#import "#/node_modules/bootstrap/scss/tables";
#import "#/node_modules/bootstrap/scss/forms";
#import "#/node_modules/bootstrap/scss/buttons";
#import "#/node_modules/bootstrap/scss/transitions";
#import "#/node_modules/bootstrap/scss/dropdown";
#import "#/node_modules/bootstrap/scss/button-group";
#import "#/node_modules/bootstrap/scss/nav";
#import "#/node_modules/bootstrap/scss/navbar";
#import "#/node_modules/bootstrap/scss/card";
#import "#/node_modules/bootstrap/scss/accordion";
#import "#/node_modules/bootstrap/scss/breadcrumb";
#import "#/node_modules/bootstrap/scss/pagination";
#import "#/node_modules/bootstrap/scss/badge";
#import "#/node_modules/bootstrap/scss/alert";
#import "#/node_modules/bootstrap/scss/progress";
#import "#/node_modules/bootstrap/scss/list-group";
#import "#/node_modules/bootstrap/scss/close";
#import "#/node_modules/bootstrap/scss/toasts";
#import "#/node_modules/bootstrap/scss/modal";
#import "#/node_modules/bootstrap/scss/tooltip";
#import "#/node_modules/bootstrap/scss/popover";
#import "#/node_modules/bootstrap/scss/carousel";
#import "#/node_modules/bootstrap/scss/spinners";
_custom.scss
(here I put variables to override Bootstrap and custom css for components)
$theme-colors: (
"red": #cf142b,
"black": #000,
"tan": #e0d9c7,
"blue": #009eba,
"blue-light": #d6e3e6,
"blue-dark": #006985,
"red-dark": #7d212b,
);
#import
'mixins/mixins';
#import
'_base/colors',
'_base/typography',
'_base/headings';
#import
'components/_page-header',
'components/text-editor',
'components/content-with-side-image',
'components/featured-artists',
'components/video-player',
'components/audio-player',
'components/call-to-action',
'components/divider',
'components/tabs',
'components/image-gallery',
'components/logos',
'components/button',
'components/page-submenu',
'components/page-submenu-target';
I got idea from
https://v5.getbootstrap.com/docs/5.0/customize/optimize/
Related
After upgrading to Angular 12 (12.2.1) from 11 I am getting an injected style block right before my style sheet link
<style>
#charset "UTF-8";#import url(https://fonts.googleapis.com/css?family=Open+Sans);
:root{
--blue:#007bff;
--a bunch of color variables --
line-height:1.5;color:#212529;
text-align:left;background-color:#fff;}
img{border-style:none;}
img{vertical-align:middle;}
img{page-break-inside:avoid;}
#page {size:a3;}
body{min-width:992px!important;}
</style>
<link rel="stylesheet" href="styles.645853d3825cd77dedab.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.645853d3825cd77dedab.css"></noscript>
</head>
That last line (body) is breaking the responsiveness of my pages.
This is only on ng build, it does not appear locally on ng serve. I can not figure out where it is coming from or what module is responsible for making this injection.
I am using ng-bootstrap 10 but downgrading it to previous version does not affect the above code block.
Fixed with the answer here:
https://stackoverflow.com/a/67582075/382281
just add inclineCritical: false to your angular.json file the particular build.
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
}
},
Need to override some elements with a specific font, which works fine on Chrome, but not any other browsers (Safari, FireFox, etc). Is there anything that was missed?
Here is my code:
const theme = createMuiTheme({
MuiTypography: {
h1: {
fontFamily: 'Source Sans Pro'
}
}
}
});
const MyApp = () => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Typography variant='h1'>Source Sans Pro font applied on Chrome, but not on other browsers</Typography>
</ThemeProvider?
)
}
It turns out that it would seem this and other fonts I was using work out-of-the-box with Chrome but not other browsers.
So basically, had to do the whole dance to add them on my project, in my case through webpack. Basically:
Install font-awesome in the project
npm install -S font-awesome
Create a style.scss file in the project's root
Import font-awesome in the newly created style.scss file:
#import '~font-awesome/css/font-awesome.css';
Fint my fonts on https://fonts.google.com/
Select the styles, generate the link to import them and do so from the newly created style.scss
#import '~font-awesome/css/font-awesome.css';
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght#0,300;0,400;0,600;1,300;1,400;1,600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght#0,400;0,600;1,300;1,400;1,600&display=swap');
Import the style.scss file from my project entry point (in my case index.js, but could also be app.js.
import './style.scss'; // here
import React from 'react';
...
ReactDOM.render(
<div>
.... My App...
</div>
, document.querySelector('#app')
);
Finally would also need to rebuild since I am using webpack
I have created a _darkmode.scss file to apply dark mode globally on my laravel+vuejs application.
I do not know how to replace/toggle it with base css i.e app.css which is generated using webpack mix function.
I have a toggle switch in nav bar, on #change event this file (_darkmode.scss) should be included / excluded.
mix
.js("resources/assets/js/app.js", `${publicPath}/js`)
.sass("resources/assets/sass/app.scss", `${publicPath}/css`)
.extract(toExtract)
.setPublicPath(publicPath)
.setResourceRoot("../")
.browserSync({
proxy: "http://localhost:8000",
port: 8080,
files: [`${publicPath}/*`]
});
if (mix.inProduction()) {
mix.version();
}
This is my app.scss file where I import other styles
#import "variables";
// Bootstrap
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
#import url("https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
#import "~vue-loaders/dist/vue-loaders.css";
#import "~toastr/build/toastr.css";
#import "~vue-multiselect/dist/vue-multiselect.min.css";
#import "~vue-wysiwyg/dist/vueWysiwyg.css";
#import "~emojionearea/dist/emojionearea.min.css";
#import "~nprogress/nprogress.css";
#import "base/all";
#import "element/all";
#import "layout/all";
Kindly help me with it.
I'm trying to import a .less file in my App.vue so that its contents are available on all components.
I create the example app like this:
vue create less_test
then I install the less npm packages
cd less_test
npm install less less-loader --save-dev
I create this simple less file in src/
_variables.less
// Colors
#yellowish: #E19525;
Then on HelloWorld.vue I change the <style> to this:
<style lang="less" scoped>
.hello {
background-color: #yellowish;
}
...
</style>
And on App.vue to this:
<style lang="less">
#import "_variables.less";
...
</style>
But when I try to build, I get this error:
.hello {
background-color: #yellowish;
^
Variable #yellowish is undefined
How can I import the global .less file without having to import it on each component?
I just add a <style src="#/path/to/_variables.less" lang="scss"></style> in my App.vue.
I'm using angular-translate in my Angular application.
And I want to change the importing scss files based on the current selected languge
#import 'partials/reset';
#import 'partials/variables_ar'; <--------- OR
#import 'partials/variables_en'; <--------- Based on $translate.use();
#import 'partials/mixins';
#import 'partials/angular-material-extend';
#import 'partials/layouts-template';
#import 'partials/layouts-page';
#import 'partials/animations';
#import 'partials/colors';
#import 'partials/icons';
Since SASS is built at compile time, not run time, you can't achieve what you're trying to do that way.
I think the best approach for you is to change the class based on the user's selected language, and then style your webapp depending on that class. For example your HTML:
<body class="{{ languageCode }}">
<header>My Header</header>
</body>
and your SCSS:
body.en {
header { color: blue; }
}
body.fr {
header { color: red; }
}