Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add PostCSS plugin to Mix

See original GitHub issue

Laravel Mix Version: 0.8.1
Node Version (node -v): 0.7.0
NPM Version (npm -v): 4.1.2
OS: Mac OS X 10.11.6

Description:

I’m trying to use Mix on a project that requires Tachyons CSS which uses a few PostCSS plugins:

postcss-import
postcss-css-variables
postcss-conditionals
postcss-custom-media
css-mqpacker
autoprefixer

It seems that with I have to use either mix.sass or mix.less, is there another option for PostCSS?

I see that Mix already uses autoprefixer, can I extend the option where it’s defined from the webpack.mix.js?

Issue Analytics

State:
Created 7 years ago
Comments:6

Top GitHub Comments

9reactions

JeffreyWaycommented, Feb 22, 2017

This is done in fecd1c9bd555a2829c3819981cefadb8d4d6c323.

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        postCss: [
            require('postcss-css-variables')()
        ]
   });

6reactions

pedroborgescommented, Apr 8, 2017

@chadidi I have a boilerplate for the CMS I use that shows how to use both, check it out:

Hope it helps you set it up for your project.

Top Results From Across the Web

PostCSS Preprocessing | Laravel Mix Documentation

First, install the PostCSS plugin through npm. npm install postcss-custom-properties ... Next, add PostCSS compilation to your webpack.mix.js file, like so:

Add PostCSS plugin to Mix · Issue #439 - GitHub

I'm trying to use Mix on a project that requires Tachyons CSS which uses a few PostCSS plugins: postcss-import; postcss-css-variables ...

What is PostCSS? How to Use Plugins to Automate CSS Tasks

PostCSS is a Node.js tool that transforms your styles using JavaScript plugins. It generates more downloads per week on NPM than other CSS ......

How to add PostCSS plugins to Bud? - Roots Discourse

Hi, I try to include the postcss-inline-svg plugin with Bud (v5.0.0-next.18 ). With Laravel Mix I included it like this: mix ... .options({ ......

PostCSS in Laravel-mix - Medium

I have added tailwindCSS (Tailwind is a utility-first CSS framework), purgecss and cssnano plugins. Mix will pipe and execute the plugins in the ......