I use Laravel with SCSS / Webmix. I have the file _variables.scss and set some variables like $primary and $secondary.
Now I want to use this variables in Blade especially in Mailtemplates. How can I realize this?
Can I load it directly from Blade template? Is it possible to get variables in Controller and pass it to Blade?
Create a "configuration" json file e.g.
config.json and put it somewhere (e.g. in resources)
{
"primary": "<Color>"
}
If you are using webpack with sass-loader then you can customise your loader rules:
const injectedColours = require('config.json');
module: {
rules: [
{
test: /\.sccs$/,
use: [
{
loader: 'scss-loader',
options: {
data: '$primary: ' + injectedColours.primary
}
}
]
}
]
}
Then you can remove the $primary entry in your _variables.scss file.
If you're using Laravel mix you can refer to https://laravel.com/docs/6.x/mix#custom-webpack-configuration on how you can merge the above in your default configuration
In your controller you can also read the same json file e.g.
$primary = json_decode(file_get_contents('config.json'))->primary;
Related
I have my SCSS partials in my Nuxt 3 project's assets/css directory (e.g. assets/css/_cards.scss). I can import them in my components using the full path (#use '~/assets/css/cards';), but I'm having trouble getting the load path working so that I can import like #use 'cards';
From what I've seen, the Nuxt config should look like this to enable that, but this and similar variations are not working for me.
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
loadPaths: ['#/assets/css'],
},
},
},
},
});
This approach is not working for me either. However, my use case is that I wanted some global styles imported, as opposed to every component on its own.
What worked for me was to use css property directly inside defineNuxtConfig object.
export default defineNuxtConfig({
css: ["#/assets/css/_variables.scss"]
});
The correct key to use is includePaths which is documented here. I tried this key before, but the reason it did not work was that I used #/assets/css for the path. The # alias does not work in this option, so I needed to use ./assets/css for the path. Here is the corrected config:
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
includePaths: ['./assets/css'],
},
},
},
},
});
my class from variable is not working, im sure its mix problem.
<div class="rounded bg-gradient-to-r {{$replay->playerOneTeam()}}">
Team: {{ $replay->playerOneTeam()}}
</div>
It seems like purgeCSS or something is removing class "from-red-400". When I set it manually and do npm run dev it works, but when it's used from variable, it's not loading. The class is in code when I inspect but the code runs like it doesn't exist.
Check your tailwind.config.js file and look for something like this:
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
// ...
}
In this example, JIT mode is enabled and purge is where you can specify files where to look for used Tailwind CSS classes. From here, you have three options:
[Not recommended] Disable JIT mode.
Follow the guidelines here to make sure the compiler sees your class name in those files you specified, i.e. to write purgeable HTML code in those files.
Divide purge into content and safelist so the compiler doesn't accidentally remove your classes specified there (which will be classes that do not appear explicitly in purgeable HTML code).
Using the example above, the third option would look something like this:
module.exports = {
mode: 'jit',
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
safelist: [
'from-red-400', // this is the class you wanted
// ... some other classes you may need
'bg-blue-500', // example class
'text-center', // example class
'hover:opacity-100', // example class
]
},
// ...
}
in 2023, if someone has the same problem, this was the solution that I found working:
Add this in tailwind.config.js
safelist: [
'bg-blue-100',
{
pattern: /bg-(gray|red|orange|amber|yellow|green|lime|blue|sky|teal|indigo|violet|purple|pink)-(50|100|200|300|400)/,
},
{
pattern: /text-(gray|red|orange|amber|yellow|green|lime|blue|sky|teal|indigo|violet|purple|pink)-(500|600|700|800)/,
},
],
I hava a laravel project, there is a README.md in the root directory. I can see the render result after pushing to GitHub, but I want to render markdown document in the local development browser.
I am trying two ways:
Read file from markdown file
convert markdown file to html with something like Webpack
Who can give a demo for this?
Since the mail blade templates parse markdown, you can use a similar approach to layout.blade.php which uses Illuminate\Mail\Markdown::parse.
In your template, such as welcome.blade.php, add this:
{{ Illuminate\Mail\Markdown::parse(file_get_contents(base_path() . '/README.md')) }}
Here is a Laravel Mix / Webpack solution, convert markdown file to html, and required in Vue.js, then show it with v-html.
First add markdown-loader
yarn add markdown-loader html-loader
Add config in webpack.mix.js, Laravel Mix can add custom config of Webpack.
mix.webpackConfig({
module: {
rules: [{
test: /\.md$/,
use: ["html-loader", "markdown-loader"],
}]
}
});
Considering README.md is in the root of Project, add a alias in webpack.mix.js
mix.alias({
'#': '/resources/js',
'#root': '/',
});
Now we can use a vue component to show the README.md at the root directory.
<script>
const readme = require('#root/README.md')
export default {
data() {
return {
readme: ""
}
},
created() {
this.readme = readme
}
}
</script>
<template>
<div class="container" ref="container" v-html="readme" />
</template>
I have an environment variable CDN_URL and I want to send this variable to the SCSS file.
I am also tried prependData of sass-loader.
I have to use Laravel 5.7, Laravel Mix 4.1.2 and webpack 4.27.1
error: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
Below is my 'webpack.mix.js' file code.
mix.webpackConfig({
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
prependData: '$cdn-s3-static-url: ' + process.env.CDN_S3_STATIC_URL + ';',
},
},
],
},
],
},
});
Below is my '_functions.scss' file code:
#function asset($type, $file) {
#return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}');
}
In my case I was running a gatsby site. Before each build, it runs gatsby-config.js, which has access to environment variables.
So at the top of the .js file that builds, before module.exports, I put this:
if(process.env.NODE_ENV === 'development') {
fs.writeFileSync('./src/styles/build-style.scss','$root: "/development-path/";');
} else {
fs.writeFileSync('./src/styles/build-style.scss','$root: "/production-path/";');
}
This results in a file which looks like:
$root: "/development-path/";
Then in the SCSS files where I needed ENV-dependent behaviour, I have:
#import './build-style.scss';
#font-face {
font-family: "MyFontFamily";
src: url($root + "font/MyFontFamily.woff") format('woff');
}
And now my asset (font in this example) loads from different spots depending on my dev/production environment variable.
It feels like a big hack and I'm sure there's a more correct way somewhere, but this got me moving again after an hour stoppage and it is working so far. I will probably extend it in the future to have build-style-dev.scss, build-style-prod.scss, and just copy them into build-style.scss at compile time. Or research the correct way.
You can prepend data to SASS using sass-loader
For example to pass the CDN_URL from .env
Extend webpack.mix.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
prependData: '$env: ' + process.env.CDN_URL + ';',
},
},
],
},
],
},
};
You may inject environment variables into Laravel Webpack Mix by prefixing a key in your .env file with MIX_. After the variable has been defined in your .env file, you may access via the process.env object.
So in your example, you should create a new variable in .env file like MIX_CDN_URL and inside webpack.mix.js you can access it using
process.env.MIX_CDN_URL
You can sass-loader that will achieve the results you desire.
I have a pug mixin. Mixin is using to create block with whatever image name passed as argument.
mixin img({imageSrc: ""} = {})
.img(src="./img/" + imageSrc + ".jpg")
As a result I want webpack either place this image in dist/img/ or processed and replaced this path with it's base64 format.
Due to my need to save relative paths in sass and pug I use url-loader. So my current configuration for pug and image looks like this:
module: {
rules: [{
test: /\.pug$/,
loader: 'pug-loader
}, {
test: /\.(jp(e*)g|png|svg)$/,
use: [{
loader: "url-loader",
options: {
outputPath: "images/"
}
}]
}]
}
Appreciate your help because I'm running out of ideas :c
I don't think url-loader has an outputPath option, it just outputs to your Webpack config's output.path. Assuming that your output.path is dist (default) you can have files go to dist/img by specifying the name option like:
options: {
name: 'img/[name].[ext]?[hash]'
}