I want to use the Tabler administration panel on Laravel. I'm attempting to install Tabler UI with npm.
npm install tabler-ui
I add the tabler package to resources/sass/tabler.scss and then add the SASS file to webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/tabler.scss', 'public/css');
But after trying to npm run watch, I got the following error.
File to import not found or unreadable:
../../../node_modules/bootstrap/scss/bootstrap.scss.
When I check the node_modules/tabler-ui/src/assets/scss/bundle I find a line which imports the bootstrap:
#import '../../../node_modules/bootstrap/scss/bootstrap.scss';
The error is for this line; I think this line should be like this:
#import '~bootstrap/scss/bootstrap.scss';
I cannot change this line because it is in the /node_modules folder. What should I do to solve this problem?
In your app.scss
replace this:
// Bootstrap
#import '~bootstrap/scss/bootstrap';
with this:
// Tabler
#import '~tabler-ui/src/assets/scss/variables';
#import '~bootstrap/scss/bootstrap';
#import '~tabler-ui/src/assets/scss/dashboard/dashboard';
Looks like bootstrap is a peer dependency.
Run npm install bootstrap to install it
Related
I've always used this method below for my Laravel projects, but for some reason, since this month, it gives me this error now, and it breaks and gives me an error in the console. This same code with .postCss works though, without any problems, and I can use Tailwind perfectly on my pages. It only happens when I use .sass.
When I run npm run watch, it gives me an error that it cannot read the import of tailwind. I've already tried to re-install node-sass and now use a version of 4.14.1, but that still doesn't solve the issue. I've tried to find this error online, but I cannot find a solution for this. Any help would be great.
webpack.mix.js
mix.sass('resources/sass/main.scss', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
main.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Error
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
^
File to import not found or unreadable: tailwindcss/base.
Installing Tailwind CSS using the PostCSS plugin is the correct way to use Tailwind. The following would be a much better idea by separating your SASS from your PostCSS.
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('autoprefixer'),
require('postcss-import'),
require('tailwindcss'),
])
.sass('resources/sass/main.scss', 'public/css');
app.css
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
I have clear Laravel 5.7 installation and I need to install izimodal package
So I have installed by npm install izimodal.
For the next step, I initialized this package in my /resources/js/bootstrap.js like:
import iziModal from 'izimodal/js/iziModal';
$.fn.iziModal = iziModal;
and run npm run dev to compile app.js
At this stage, the package was successfully imported and working but I missing CSS part of izimodal... How can I correctly initialize this package with CSS? I have tried this code in my webpack.mix.js but it does not work:
mix.copy('node_modules/izimodal/css/iziModal.css', 'resources/css');
mix.styles([
'resources/css/reset.css',
'resources/css/style.css'
], 'public/css/app.css');
Solved. Just added to my app.scss
// npm-package
#import "~izimodal/css/iziModal.css";
// Custom CSS
#import "../css/reset.css";
#import "../css/style.css";
How to add font-awesome to laravel project.
I ran:
npm install font-awesome
But what is next, how to import it in my app.scss what is correct path?
I am trying :
#import "/node_modules/font-awesome/scss/font-awesome.scss";
But get and error:
ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed:
#import "/node_modules/font-awesome/scss/font-awesome.scss";
If you're pulling a file in from your node_modules directory you can use ~ followed by the path to the file inside node_modules:
#import '~font-awesome/scss/font-awesome';
If you have:
mix.options({
processCssUrls: false
});
Then you will need to copy the files in your webpack.mix.js file with something like:
mix.copy('./node_modules/font-awesome/fonts/**', 'public/fonts/font-awesome');
And then above the #import in your .scss file have:
$fa-font-path: '/fonts/font-awesome';
I have installed font-awesome with npm with following command :
npm install font-awesome --save
And then i have add following line in app.scss
#import "~font-awesome/scss/font-awesome";
Then i have run npm run watch
I have checked manually font-awesome folder is there inside the node_modules directory.
But in my webpage icon not displayed and in console i have seen following Error
GET
http://localhost/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e
net::ERR_ABORTED GET
How do i resolve the issue?
Since your are using Laravel, you need to write the following line in resources/asset/sass/_variables.scss:
$fa-font-path: "~font-awesome/fonts/";
Now in your resources/assets/sass/app.scss, write:
#import "~font-awesome/scss/font-awesome";
I want use sparksuite/simplemde-markdown-editor in Laravel Mix compiling.
I have add this line in app.scss:
#import "node_modules/simplemde/dist/simplemde.min.css";
and this line in app.js:
window.SimpleMDE = require('simplemde');
I want compiling this plugin in my project...
/* in webpack.mix.js file add following lines at the end */
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
After adding Run below command in terminal
npm run dev
(or)
npm run watch