I tried to install CoreUI in my Laravel project using webpack.mix.js. I used the following for style and icons.
// CoreUI Icons Set
#import '~#coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
#import '~font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
#import '~simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
#import '~flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
#import '~bootstrap-vue/dist/bootstrap-vue.css';
// If you want to override variables do it here
#import "variables";
// Import styles with default layout.
// If you are going to use dark layout please comment next line
#import "~#coreui/coreui-pro/scss/coreui";
// Import styles with dark layout
// If you want to use dark layout uncomment next line
//#import "~#coreui/coreui-pro/scss/themes/dark/coreui-dark";
// If you want to add something do it here
#import "custom";
// ie fixes
#import "ie-fix";
When I compile code using Laravel Mix I get the following error.
Error: Conflict: Multiple assets emit to the same filename
fonts/vendor/#coreui/icons/CoreUI-Icons-Linear-Free.eot?089ab3c11c572362d088083c561cfa55
I found some solutions on the internet, but they don't work in my case.
This had to do with a Webpack update. Ran into the same issue, just unlucky timing.
Try this.
npm install webpack#4.40.2 --save-dev
rmdir node_modules /Q /S
npm install
npm run prod
Related
I am evaluating Svelte with Bootstrap/Sveltestrap and a Bootswatch theme.
I need to support an offline use case, which means Bootswatch's fonts can't be loaded from google via a CDN.
So i configured svelte-preprocess and sass, but when compiling my app.scss I get this error:
[plugin:vite:css] expected ")".
╷
9 │ #import url(../node_modules/.pnpm/bootswatch#5.2.0/node_modules/bootswatch/dist/lumen/$web-font-path);
│ ^
╵
node_modules/.pnpm/bootswatch#5.2.0/node_modules/bootswatch/dist/lumen/_bootswatch.scss 9:15 #import
src/app.scss 5:9 root stylesheet
app.scss
$web-font-path: false;
#import 'bootswatch/dist/lumen/_variables.scss';
#import 'bootstrap/scss/bootstrap.scss';
#import 'bootswatch/dist/lumen/_bootswatch.scss';
main.ts
import './app.scss';
import App from './App.svelte';
const app = new App({
target: document.getElementById('app'),
})
export default app;
Based on my understanding of bootswatch#573 & bootswatch.com/help setting $web-font-path: false should disable the #import in _bootswatch.scss, but that obviously isn't the case. Somehow $web-font-path is not falsey inside _bootswatch.scss.
The top of _bootswatch.scss
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght#0,300;0,400;0,700;1,400&display=swap" !default;
#if $web-font-path {
#import url($web-font-path);
}
Any one have any ideas? Is svelte somehow mangling the SASS variable? Trying to maintain the ability to customize the theme via SASS variables, and disable external font loading.
I'm coming to you because I would like to use the Tabulator http://tabulator.info/ library in a Laravel project. I have correctly installed the library in my project (import of css and js scripts).
Terminal :
npm install tabulator-tables
resources/js/app.js:
window.Tabulator = require('tabulator-tables/dist/js/tabulator.js');
resources/js/app.scss:
#import 'variables';
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
#import "../../node_modules/tabulator-tables/dist/css/bootstrap/tabulator_bootstrap.min.css";
And to stylize the tables a bit, Tabulator provides a system to use sass variables.
resources/js/_variables.scss:
$backgroundColor:black;
$headerBackgroundColor: #3F3F3F;
$headerTextColor: #fff;
$borderColor:#FFE6;
$rowTextColor: #000000;
$rowSelectedBackground: #FFE6A8;
#import "../../node_modules/tabulator-tables/dist/css/tabulator_simple.min.css";
But as indicated in the documentation http://tabulator.info/docs/4.9/style#sass, it is enough to override the variables used by the library to style the tables. But when I do npm run dev, no changes are made. Would you have an idea ?
Sorry i have noticed that i import the wrong file in resources/scss/app.scss.
//wrong way
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
//good way
#import "../../node_modules/tabulator-tables/src/scss/tabulator_simple";
I use laravel with webpack.mix and I import public google font to app.scss file:
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500&display=swap');
(no one spaces or line breaks in this first string!)
Webpack.mix command looks common:
mix.js('resources/js/app.js', 'public/js').sourceMaps()
.sass('resources/sass/app.scss', 'public/css');
and translate this scss file to css.
BUT in css I get:
#import url(https://fonts.googleapis.com/css2?family=Rubik:wght#300;
400;500&display=swap);
What the hell this weird line break appears from?! Browser cant see the font this way =
I tried npm run dev, run prod. Check original string 20 times...
A workaround is to use %3b instead of ; in your link.
Reference: https://github.com/JeffreyWay/laravel-mix/issues/2430#issuecomment-653915587
I'm using Bulma with Webpack 4. I'm trying to change the colour of button.is-primary to be pink instead of turquoise.
Here's the entire contents of my .scss file.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This is getting me the following error on build.
1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1> ^
1> Undefined variable: "$pink".
Now, if I set $primary to be a specific hex colour it builds fine, so this issue seems to be because I'm trying to use the existing colour variable $pink. It does make sense to me that it hasn't been defined at that point, but the docs clearly say that I can add my overrides before importing Bulma, and their example does the same thing.
Can anyone point me in the right direction?
EDIT: here's the documentation screen I'm looking at.
https://bulma.io/documentation/customize/with-webpack/
I note that in their example they do set new values for derived variables BUT only where they've redefined the intial value, like this...
$pink: #FA7C91;
If I change my .scss file as follows it does then compile and work as expected.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This should clarify things for you: https://versions.bulma.io/0.7.0/documentation/overview/customize/
// 1. Import the initial variables
#import "../sass/utilities/initial-variables";
// 2. Set your own initial variables (optional)
$pink: #ffb3b3;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
In my case, I forgot that I was importing Bulma via its compiled .css file.
Of course, you cannot override the Sass variables that way because after compilation they don't exist. To override Bulma's variables you need to import its .sass file(s), not its .css file.
Sharing in case anyone else makes the same mistake.
How can I install/import/include Bootstrap Vue into my laravel project? I am new in Vue, I know how to install in a Vue JS application, but how can I add it laravel?
app.scss
// Fonts
#import url("https://fonts.googleapis.com/css?family=Nunito");
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap/scss/bootstrap";
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap-vue/src/index.scss";
.navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require("./bootstrap")
window.Vue = require("vue")
import BootstrapVue from "bootstrap-vue" //Importing
Vue.use(BootstrapVue) // Teslling Vue to use this whole application
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component(
"example-component",
require("./components/ExampleComponent.vue").default
)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: "#app"
})
You can do this simply by node and npm.
install node in your system. and then open terminal from your project root directory like you do with laravel for running artisan commands.
when you open terminal.
simply run
npm i bootstrap-vue // you can also give save falg to save in package.json file
Here am not installing vue .beacuse it's already installed in laravel if you check your app.js file, inside your resources directory
and after successfully installing this you can import this in your app.js by
import BootstrapVue from 'bootstrap-vue' //Importing
Vue.use(BootstrapVue) // Telling Vue to use this in whole application
For css
you can import this by simply
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
in app.scss
After all configuration setup
run
npm run dev //herewebpack do its work
or if you are in production, you can do this by
npm run production
Just execute npm i vue bootstrap-vue bootstrap inside folder there you have package.json or manually change package.json.
Then you have to add into ./resources/assets/js/bootstrap.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Install your package with
npm install bootstrap-vue
or
yarn add bootstrap-vue
Then you can include globally your library by adding this row in your resources\js\app.js after window.Vue = require('vue');
Vue.use(require('bootstrap-vue'));
You can take a look to the official Vue documentation for plugins installation