https://github.com/yazeedobaid/laravel-mix-postcss-config

A Laravel-mix plugin to add the postcss-loader to the default mix webpack.config.js file.
https://github.com/yazeedobaid/laravel-mix-postcss-config

laravel-mix laravel-mix-plugin postcss postcss-loader webpack

Last synced: 7 days ago
JSON representation

A Laravel-mix plugin to add the postcss-loader to the default mix webpack.config.js file.

• Host: GitHub
• URL: https://github.com/yazeedobaid/laravel-mix-postcss-config
• Owner: yazeedobaid
• License: mit
• Created: 2019-05-17T23:18:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T21:24:43.000Z (over 1 year ago)
• Last Synced: 2024-11-03T20:02:30.207Z (11 days ago)
• Topics: laravel-mix, laravel-mix-plugin, postcss, postcss-loader, webpack
• Language: JavaScript
• Size: 121 KB
• Stars: 6
• Watchers: 0
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# laravel-mix-postcss-config

![GitHub](https://img.shields.io/github/license/yazeedobaid/laravel-mix-postcss-config.svg?style=popout)

![Node.js Package](https://github.com/yazeedobaid/laravel-mix-postcss-config/workflows/Node.js%20Package/badge.svg)

![npm](https://img.shields.io/npm/v/laravel-mix-postcss-config.svg?style=popout)

![npm](https://img.shields.io/npm/dt/laravel-mix-postcss-config.svg?style=popout)

A Laravel-mix plugin to add the `postcss-loader` loader with its configuration file to the default mix 

webpack.config.js file in a fluent way.

```js

mix.js('resources/js/app.js', 'public/js')

    .postCss('resources/css/app.css', 'public/css')

    .postCssConfig();

```

# Introduction

Laravel mix has a great and fluent api to define the build steps for an application. Mix has supprt for

defining postcss plugins through the `postCss` api. Defining these plugins along with their options in mix's

config file will make the file large and difficult to read.

postcss-loader provide a way to define postcss plugins in a separate config file (postcss.config.js). This 

plugin extends laravel-mix api and add a method to include the loader with its config file in the build process.

# Install

Install using npm:

```

$ npm install laravel-mix-postcss-config --save-dev

```

# Usage

Require the pulgin in your laravel-mix config file and call the extension method on mix.

```js

const mix = require('laravel-mix');

require('laravel-mix-postcss-config');

mix.js('resources/js/app.js', 'public/js')

    .postCss('resources/css/app.css', 'public/css')    

    .postCssConfig();

```

The above call will merge the `postcss-loader` loader to mix's generated webpack config rules with 

the default loader configuration options. If you wish to change the default loader options you can 

pass them in the call:

```js

const mix = require('laravel-mix');

require('laravel-mix-postcss-config');

mix.js('resources/js/app.js', 'public/js')

    .postCss('resources/css/app.css', 'public/css')    

    .postCssConfig({ /* postcss-loader options */ });

```

You can find a list of possible `postcss-loader` loader options in the loader 

[github repository](https://github.com/postcss/postcss-loader)

# License

The MIT License (MIT). Please see [License File](https://github.com/yazeedobaid/laravel-mix-postcss-config/blob/master/LICENSE) for more information.