When writing plain text CSS and plain text JavaScript in Laravel, it's difficult to reset the cache, so I tried to write a mix to build everything, but the build time became long and it wasn't very good.

Introduction

Don't you find it tiresome to learn Sass?

I do.

The reasons why learning it is tiresome are as follows:

• It has specific syntax that not many people use, which makes it tiresome.
• The selling point of being able to reuse common layouts is not really necessary because you can do it with CSS anyway, which is tiresome.
• It is tiresome to load unnecessary CSS on a heavy homepage.

While I may be willing to learn Sass, I still think that raw CSS is more accessible and user-friendly, especially when it comes to imposing it on others.

So, it's tiresome.

I really want to write plain text CSS and plain text JavaScript

This is the point of this article.

(Actually, I want to write in React.)

I feel like I need to write in raw CSS and raw JavaScript no matter what.

With that commitment in mind, I will proceed with the following article.

How to write plain text CSS in Laravel

It's super simple.

Just put your CSS file in public/css and include it.

It's incredibly straightforward.

You can write CSS as usual.

Issues noticed during deployment

• How to compile?
• How to handle browser caching?

Compiling involves compressing the CSS file to speed up loading.

Browser caching refers to storing CSS file information in the browser to increase display speed. The issue arises when the browser loads outdated (previously stored) CSS without recognizing the updates made to the CSS file.

Laravel-mix can handle this!

Laravel comes with an amazing system called laravel-mix.

I quite like this system.

You can compile and handle browser caching using laravel-mix.

In the project directory, there is a file named webpack.mix.js.

In this file, you will find the following declaration, which appends a version to the file during the mix process:

if (mix.inProduction()) {
  mix.version()
}

Blade template loading:

<link rel="stylesheet" href="{{ mix('??.css') }}">

By using mix() instead of asset(), when building in production, an ID is assigned to the CSS file. By loading this, you can detect changes.

What happens when you do this in plain text CSS

It becomes extremely cumbersome.

Edit webpack.mix.js

mix.styles('resources/assets/css/user/home.css', 'public/css/user/home.css');

While the description itself is this simple, writing this for every file is simply tiresome.

Automatically compile and output CSS and JavaScript written in resources to public

This is the main content of this article.

First, install node.js packages.

npm install path
npm install glob

webpack.mix.js

var glob = require("glob")
const path = require("path")

// Plain text CSS
glob("resources/assets/css/**/*", (err, files) => {
  const css_files = files.filter(x => x.indexOf(".css") !== -1)
  css_files.forEach(file => {
    var name = file.replace("resources/assets/", "public/")
    mix.styles(file, name)
  })
})

// Plain text Javascript
glob("resources/assets/js/javascript/**/*", (err, files) => {
  const js_files = files.filter(x => x.indexOf(".js") !== -1)
  js_files.forEach(file => {
    var name = file.replace("resources/assets/js/javascript", "public/js")
    var js_path = path.dirname(name)
    mix.babel(file, name)
  })
})

That's it.

CSS written in resources/assets/css/ is output to public/css,

JavaScript written in resources/assets/js/javascript is output to public/js.

This way, when you create or edit a CSS file in resources, the CSS file in public will be automatically updated.

Don't forget to run:

npm run watch

Challenges

Compiling is taking longer...

During development, I would like CSS changes to be made quickly.

This can be stressful if it continues like this forever, so while it may be okay temporarily, ultimately, I may have to consider writing in Sass. Sigh.

The hot reload in Next.js is too comfortable.