I have a project with laravel7 using blade templates, and at the moment I am using webpack and I get a compilation error that I show at the end of the post.
File webpack.mix.js
const mix = require('laravel-mix');
mix.js([
'resources/assets/js/app.js',
'resources/assets/vendor/popper/popper.min.js',
'resources/assets/vendor/bootstrap/bootstrap.min.js',
'resources/assets/vendor/bootstrap/bootstrap.bundle.min.js',
'resources/assets/vendor/boostrap-table/bootstrap-table.min.js',
'resources/assets/vendor/boostrap-table/bootstrap-table-es-ES.min.js',
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css/app.css');
File app.js
require('./bootstrap');
File app.scss
#import "../vendor/bootstrap/bootstrap.min.css";
#import "../vendor/boostrap-table/bootstrap-table.min.css";
#import '../../../node_modules/#fortawesome/fontawesome-free/scss/fontawesome';
#import '../../../node_modules/#fortawesome/fontawesome-free/scss/regular';
#import '../../../node_modules/#fortawesome/fontawesome-free/scss/solid';
#import '../../../node_modules/#fortawesome/fontawesome-free/scss/brands';
#import "style";
#import "../vendor/twitter-boostrap/bootstrap.css";
#import "../vendor/twitter-boostrap/bootstrap-datetimepicker.css";
These last two lines are the ones that are giving me a failure when doing an npm run watch
The error I get is this
ERROR in ./resources/assets/vendor/twitter-boostrap/bootstrap.css
(./node_modules/css-loader/dist/cjs.js??ref--5-2!./node_modules/postcss-loader/src??
postcss0!./resources/assets/vendor/twitter-boostrap/bootstrap.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in
'C:\Apache24\htdocs\laravel\resources\assets\vendor\twitter-boostrap'
Most likely mix is causing the error because the url path for the font is not absolute. You should try this.
.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.options({
processCssUrls: false
});
More info here: https://laravel.com/docs/8.x/mix#url-processing
Related
I'm trying to compile a css file with Laravel-mix but for some reason when i try to include the file in the header the page is blank with no errors.
webpack.mix.js
const mix = require('laravel-mix');
require('vuetifyjs-mix-extension')
require('laravel-mix-purgecss');
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader').vue()
.sass('resources/sass/app.scss', 'public/css').purgeCss()
.postCss('../assets/css/custom.css', 'public/css', [
cssImport(),
cssNesting(),
require('tailwindcss'),
]).purgeCss()
importing it in the header
<link href="{{ mix('css/custom.css', 'core/public') }}" rel="stylesheet"/>
the file gets included in the header correctly also i can look at the file and it's contents, also CSS is applied as far as i can tell looking at the body.
**Edit
Most CSS doesn't get compiled and it's missing from the file which gets generated from webpack
package.json
"laravel-mix": "^6.0.27",
"laravel-mix-purgecss": "^6.0.0",
Laravel Version 5.8
**Edit
I found out why the page is blank, it's a Vuetify issue where v-app is covering the page, i had set this CSS property inside the file which fixed this issue
div > .v-application--wrap {
min-height: auto !important;
}
The problem is this CSS property is missing in the compiled webpack file.
I've created a new project using the lucky framework and want to add tailwindcss. I have added it using these steps:
yarn add tailwindcss (https://tailwindcss.com/docs/installation)
npx tailwindcss init (https://tailwindcss.com/docs/configuration)
Added this to webpack.mix.js (https://tailwindcss.com/docs/installation)
mix.postCss('src/css/main.css', 'public/css', [
require('tailwindcss'),
])
Added the following to src/css/main.css:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
When I run lucky dev the assets are compiled but text isn't changed like in this basic example:
li class: "p-3 text-orange-800" do
text "Modify this page: src/pages/me/show_page.cr"
end
I seem to miss some steps to make it work in this framework.
I don't think your webpack.mix.js content is quite right.
You can see how I set up Tailwind CSS in a Lucky Application in this RailsByte, but basically:
Add const tailwindcss = require("tailwindcss"); somewhere at the top of webpack.mix.js.
Add this to your .options() hash in webpack.mix.js, assuming your Tailwind config is in the root directory of your project:
processCssUrls: false,
postCss: [ tailwindcss("./tailwind.config.js") ],
These are all pretty much from the Laravel Mix setup in the Tailwind Guides themselves, here: https://tailwindcss.com/docs/installation#build-tool-examples
I'm using Laravel 5.7 and i'm applying AMP to our website. (https://amp.dev/).
I'm folowing these steps to convert HTML to AMP: https://amp.dev/documentation/guides-and-tutorials/start/converting/?format=websites
One of the requirements is to replace external stylesheets to internal stylesheets (https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors?format=websites#replace-external-stylesheets). I've done this by doing the following code below:
<style amp-custom>
{!! file_get_contents(public_path('css/app.css')) !!}
</style>
I'm using Sass and I'm using Laravel mix to compile my assets.
This is my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
.version();
But upon doing this I've encountered an error in the AMP:
CSS syntax error in tag 'style amp-custom' - saw invalid at rule '#charset'.
To solve this problem, I must remove the #charset "UTF-8"; in the compiled css css/app.css. And it seems that running npm run dev, its automatically adding #charset "UTF-8"; at the top of the file. How do I remove this?
I'm thinking that I have to add some code in the webpack.mix.js to remove that. But I don't have an idea how to do this.
Yep! SASS adds this directive if your SASS contains any extended (e.g., not standard ASCII) characters. There's an open issue in the SASS project to provide an option to not do this... but they've said they won't provide that option.
For now, it's pretty easy to fix... simply add a step that your build process that hunts for #charset "UTF-8"; and removes it. You can see how I did it here:
https://github.com/ampproject/samples/blob/master/amp-camp/gulpfile.js#L63
gulp.task('styles', function buildStyles() {
const cssEncodingDirective = '#charset "UTF-8";';
return gulp.src(paths.css.src)
... (stuff removed)
.pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop())
... (more stuff removed)
});
If you run 'npm run production', that line will be deleted automatically and you will not get an error in AMP validation.
I have installed datatables with npm by help of this doc, now I'm not sure how I can add datatables css and js files to my app.css and app.js
Downloaded files by NPM
Code
my webpack.mix.js
const mix = require('laravel-mix');
//laravel default to make app.css and app.js
// I want add Datatables to these files
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
//my template files
mix.combine([
'public/theme/primary/js/jquery.min.js',
'public/theme/primary/js/popper.min.js',
'public/theme/primary/js/bootstrap.min.js',
'public/theme/primary/js/uza.bundle.js',
'public/theme/primary/js/default-assets/active.js'
], 'public/js/combined.js');
Any idea?
Solved
I added this code to my bootstrap.js under require('bootstrap');
require( '../../node_modules/datatables.net/js/jquery.dataTables.js' );
require( '../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js' );
and then added styles to my app.scss
#import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
Everything works perfectly now.
Hope it help others.
To combine multiple scripts and styles you can do it this way:
mix.scripts([
'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
'resources/js/app.js'
])
.styles([
'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
'resources/sass/app.scss'
]);
This by default should create all.js and all.css files in the respective js and css public folders.
I don't know why but this irregularity always happens in my Yeoman build system. In my Gulpfile.js, the directory where all .scss files will be watched is in app/styles/**/*.scss. The strategy I used is: the only compiled stylesheet that I would link to HTML file is the main.scss, where the other .scss files are already imported to. So when the compilation is done, only the main.css will be linked.
main.scss
#import 'base';
#import '_banner';
#import '_works';
#import '_design';
#import '_story';
#import '_contact';
Here is the image of the content of the folder where the stylesheets are located:
The problem is, every time I make changes to one of any of my .scss files, it throws an error that refers to importing error; but when I try to make some changes again, the compilation is successful.
In my Gulpfile.js:
gulp.task('styles', () => {
return gulp.src('app/styles/main.scss')
.pipe($.plumber())
.pipe($.if(dev, $.sourcemaps.init()))
.pipe($.sass.sync({
outputStyle: 'compressed',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.if(dev, $.sourcemaps.write()))
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Is this some kind of a bug? What should I do to prevent this from happening again?