I have a mix file, and I'm passing it the data like this:
mix.sass('resources/sass/styles.scss', 'public/assets/css')
.options({
processCssUrls: false,
prependData: '$test: testing prepend;',
postCss: [tailwindcss('./tailwind.config.js')],
});
And I'm just doing this:
body {
content: $test;
}
To test if I get the $test variable.
However, when I run the app, I get:
What am I doing wrong?
P.S:
php artisan --version returns: 8.48.1
Use prependData not inside options but as a third parameter of a sass method like it said here
Behind the scenes, Laravel Mix of course defers to webpack's sass-loader to load and compile your Sass files. From time to time, you may need to override the default options that we pass to it. Use the third argument to mix.sass() in these scenarios.
mix.sass('src/app.scss', 'dist', {
sassOptions: {
outputStyle: 'nested'
}
});
So in your case it woould be
mix.sass('resources/sass/styles.scss', 'public/assets/css', {
additionalData: '$test: testing prepend;',
})
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.config.js')],
});
Related
I need to compile the same scss file two times, with different sassOptions. Something like:
mix.sass('resources/sass/master.scss', 'public/css', {
sassOptions: {
includePaths: [
'resources/sass/firstconfig'
],
}
})
.sass('resources/sass/master.scss', 'public/css', {
sassOptions: {
includePaths: [
'resources/sass/secondconfig'
],
}
})
Ideally, this would generate a master_firstconfig.css and a master_secondconfig.css. Then, depending on the current config, I will load the sheet I need (I got this part covered).
Is this possible? When I try to do it, it says I cant mention the same file twice.
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 am trying to remove unused css rules from one or more of my sass files.
Research led me to postcss-uncss as the best option for removing unused css if you do not use server-side rendering (see: https://www.purgecss.com/comparison)
https://github.com/uncss/postcss-uncss
Now, postcss-uncss is a wrapper for uncss: https://github.com/uncss/uncss
However, the uncss documentation is confusing to me, and the example configuration here is not useful: https://github.com/uncss/postcss-uncss#example-configuration
How does one configure postcss-uncss for Laravel Mix?
THis is what I have so far:
mix.js('resources/js/app.js', 'public/js')
.options({
processCssUrls: false,
postCss: [
require('postcss-uncss'),
tailwindcss('./tailwind.config.js')
],
})
I want to:
Tell it which laravel routes to use (or 'all' should also be fine)
Where my sass / scss files are located: /resources/sass/* (example files: /resources/sass/app.scss, /resources/sass/admin/admin.scss, etc)
Where to put the output ie the compiled (and cleaned up) css without the unused rules: /public/css/* (so as to preserve the same structure, for example: /public/app.css, /public/admin/admin.css, etc)
Thoughts would be greatly appreciated.
This is what I ended up doing (used purgecss, which turns out, is a better option than uncss, according to my conversation with Adam Wathan
let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
// Removes unused CSS
// According to Discord chat: Running Purge CSS as part of Post CSS is a ton faster than laravel-mix-purgecss
// But if that doesn't work use https://github.com/spatie/laravel-mix-purgecss
const purgecss = require('#fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./resources/views/*.php',
'./resources/views/**/*.php',
'./resources/js/components/*.vue',
'./resources/js/components/**/*.vue',
],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
mix.options({
clearConsole: true, // in watch mode, clears console after every build
processCssUrls: false,
postCss: [
//require('tailwindcss'),
tailwindcss('./tailwind.config.js'),
// to enable purgecss on production only
...process.env.NODE_ENV === 'production' ? [purgecss] : []
// to enable on all environments, local and production
//purgecss
],
})
;
Perhaps you might try the Spatie package?
Let's install it.
npm i laravel-mix-purgecss
Call purgeCss() in your webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({ enabled: true });
I want to use PurifyCSS in Laravel but I can't get it to work.
Stack
Laravel: 5.5.4
NPM: 6.0.0
Node.js: 8.10
Code
mix.styles([
'resources/assets/css/panel/a.css',
'resources/assets/css/panel/b.css',
'resources/assets/css/panel/c.css',
'resources/assets/css/panel/d.css',
], 'public/css/panel.css').options({
purifyCss: {
purifyOptions: {
info: true,
rejected: true,
minify: true
},
paths: ['resources/views/admin-layout.blade.php'],
verbose: true
},
});
I searched on the internet but couldn't find anything. I want to strip unused CSS from all Blade pages. Even on this link, nobody answered with the correct answer. Even if PurifyCSS is first, it's not working.
Thanks for the help.
Relatively simple as you can declare the mix variable and then set your options.
const mix = require('laravel-mix');
mix.options({
purifyCss: true
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
I am trying to run mocha with gulp with the configuration existed before.
moch.opts has the following line.
--timeout 999999
--ui tdd
--full-trace
--recursive
--compilers js:babel-register
how to add them here :
gulp.task('test', function() {
return gulp.src('sampleTest/*.js', { read: false })
.pipe(mocha());
});
I believe you can either create properties on the options object passed to gulp-mocha or you can just have it read the options file. In my case, I didn't want to duplicate things like --recursive or --require test/_init.js, but I did want to override the reporter, so I use the code shown below:
gulp.task('test', ['compile'], function() {
return gulp.src([], { read: false })
.pipe(mocha({
opts: 'test/mocha.opts',
reporter: 'min'
}))
.on('error', gutil.log);
});
You may want to modify this so that it doesn't assume the default path to test files (e.g. test/*.js), but in my simple case I didn't even need to pass a path to mocha. I'm just using gulp to trigger it (as if I had run on the command line something like mocha --opts test/mocha.opts --reporter min)
Options are passed directly to the mocha binary, so you can use any its command-line options in a camelCased form. this is the document link
gulp.task('test', ['compile'], function() {
return gulp.src([], { read: false })
.pipe(mocha({
timeout: 999999,
fullTrace: true,
reporter: 'min'
}))
.on('error', gutil.log);
});
add the setTimeout call after the mocha call
.pipe(mocha(),setTimeout(function() {
}, 999999))