im using Larverl 5.5 with Laravel Mix 1.0. All of my images are stored in public/images, fonts are in public/fonts. The problem is if my Laravel project is inside sub folder like htdocs/demo/laravel, all the images and fonts url cannot be found in scss files. For e.g:
app.scss
// Bootstrap
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
// Font
#import "components/fonts";
// Font Awesome
#import "~font-awesome/scss/font-awesome.scss";
wrapper {
.banner {
background: url('/images/banner.png') no-repeat;
background-size: cover;
}
}
fonts.scss (inside fonts/components folder)
#font-face {
font-family: MyFont;
font-weight: normal;
font-style: normal;
src: url("/fonts/MyFont.eot");
src: url("/fonts/MyFont.ttf") format("truetype"),
url("/fonts/MyFont.woff") format("woff");
}
I also install font awesome and boostrap by npm and suffer the same problem with font.
Here is my webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Update 1:
The problem with fonts was solve by add this to webpack.mix.js:
mix.setPublicPath('public/');
mix.setResourceRoot('../');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now the problem remains is the background image on scss file. It still points to "/images/banner.png" instead of "../images/banner.png" in app.css after run "npm run dev"
Update 2:
I was wrong, the problem with fonts still remain, only font awesome got correct path "../fonts", MyFont still points to "/fonts"
Open your webpack.mix.js file inside the app folder and add these lines:
mix.setPublicPath('public');
mix.setResourceRoot('../');
And then run: npm run dev.
It will work.
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.
Noob to Gatsby and SCSS I wanted to dive into both and learn them beginning of the new year. After following the Gatsby tutorial I wanted to dive in and build a site based off the gatsby-starter.
Followed the documentation for install & config for SASS.
In src created a directory named fonts and added Open Sans:
src/fonts/OpenSans-Regular.ttf
src/fonts/OpenSans-Bold.ttf
src/fonts/OpenSans-Italic.ttf
created a directory in src for SCSS called main.scss and created a partial directory to bring in typography:
src/styles/main.scss
src/styles/partials/_typography.scss
main.scss:
#import 'partials/typography';
body {
font-family: $font-primary;
}
_typography.scss:
$font-primary: 'Open Sans', sans-serif;
// Body Font:
#font-face {
font-family: $font-primary;
font-style: normal;
font-weight: normal;
src: url('../../fonts/OpenSans-Regular.ttf') format('truetype');
}
In index.js I bring in the SCSS with no issues:
import React from 'react'
import '../styles/main.scss'
const Home = () => {
return <div>Hello world!</div>
}
export default Home
but in the terminal I get font errors for each font:
Can't resolve '../../fonts/OpenSans-Regular.ttf' in '/path/to/project/src/styles'
If you're trying to use a package make sure that '../../fonts/OpenSans-Regular.ttf' is installed. If you're trying to use a local file make sure that the path is correct.
error Generating development JavaScript bundle failed
Per research I dont see an answer and I've read:
global scss in Gatsby
Using Local Fonts
gatsby-config.js:
module.exports = {
plugins: [`gatsby-plugin-sass`],
}
Why am I getting an error when trying to bring in local fonts for this site? Also, I'm bringing in the local font because I read in the documentation there is an offline ability.
Edit:
Forked Gatsby with the Hello World Starter:
The mindset and your approach is perfectly valid and the issue relies on the relativity of the paths in your _typography.scss. Use something like this:
$font-primary: 'Open Sans', sans-serif;
// Body Font:
#font-face {
font-family: $font-primary;
font-style: normal;
font-weight: normal;
src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
Notice the error prompted:
Can't resolve '../../fonts/OpenSans-Regular.ttf' in
'/path/to/project/src/styles'
/path/to/project/src/styles it's weird, it seems that you have something hardcoded somewhere because of the /path/to/project/ part. Give it a look too.
The issue relies on your path, which is relative to the main.scss file, not to the partial since, in the end, the partial belongs to the main.scss file because you are importing it directly.
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 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
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.