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.
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 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 trying to use a theme which I bought from themeforest with Laravel
I have already use mix.copy to move my fonts from node_modules to my public dir, this works fine./
However when I include the following lines in my webpack.mix file,
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
I get the following errors
Any idea what I am doing wrong here?
Never mind seems like this is doing the trick
mix.options({
processCssUrls: false
});
Set to false to take urls as they are
I am using Laravel Mix in Laravel 5.4 and I would like to combine to plain files and add versioning.
Reading the documentation it says
The version method will automatically append a unique hash to the
filenames of all compiled files, allowing for more convenient cache
busting
And it efectively does what it says. But is there any workaround to obtain a final combined file with versioning?
Actually I would like to join some compiled files together with other plain files and combine everything in a single versioned file.
Edit:
The code I am using is like the following
mix.sass('resources/assets/sass/app.scss', 'public/css')
.combine(['public/css/app.css', 'other/component/file.css'], 'public/css/all.css')
.version();
And I would like to obtain a versioned all.css file. i.e. something like all.d41d8cd98f00b204e9800998ecf8427e.css.
However what I get is a versioned version of the app.css and a non-versioned version of the all.css.
Versioning/Cache-Busting for CSS and JS files
Webpack.Mix
After combining my css (using mix.styles) and js (using mix.scripts) files into two files, I had all.css and all.js.
To add versioning, I did the following:
var timestamp = Date.now();
mix.copy('public/css/all.css', 'public/css/all/all.'+ timestamp + '.css');
mix.copy('public/js/all.js', 'public/js/all/all.'+ timestamp + '.js');
OR
Write it directly when you combine your css and js files, for example:
mix.styles([
'public/css/app.css',
'public/css/custom.css'], 'public/css/all/all.'+ Date.now() + '.css').
mix.scripts([
'public/js/app.js',
'public/js/custom.js'], 'public/js/all/all.'+ Date.now() + '.js').
Blade layout file:
I created /css/all/ and /js/all/ directories. I used the scandir() php function with ordering to get all of the files in the respective directories. Then I got the first filename from the array, which in this instance was 'all.1574160664960.css'.
#php($css_files = scandir('css/all/', 1))
<link href="/css/all/{{ $css_files[0] }}" rel="stylesheet">
#php($js_files = scandir('js/all/', 1))
<script src="/js/all/{{ $js_files[0] }}"></script>
https://laravel-mix.com/docs/5.0/versioning
In webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.sass', 'public/css')
.version();