Webpacker: How to use webpacker plugins?

[axhamre]

This is perhaps super obvious, apologies in advance in that case.

I'd like to use the plugin postcss-modules-values with which we can use variables in css much like in sass.

This is an example how to implement it, but I cannot get it to work in Webpacker:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var values = require('postcss-modules-values');

module.exports = {
  entry: ['./src/index'],
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }
    ]
  },
  postcss: [ 
    values 
  ],
  plugins: [
    new ExtractTextPlugin('style.css', { allChunks: true })
  ]

};

[gauravtiwari]

If you have run the webpacker: install task you will have a postcss.yml file in Your app root. Just add the plugin there 👍

[axhamre]

Thanks a lot! For future reference if someone else finds this issue:

• The file in root with PostCSS plugins is called .postcssrc.yml
• There's no need to add any extra plugin to get the variable functionality, as the plugin PreCSS is included by default in Webpacker and already provides this (and all other sass features like loops, mixins etc).

[gauravtiwari]

@hundsim Awesome, thanks for sharing 👍

[everaldo]

@hundsim , could you help me please on how to find Docs about the syntax for editing postcssrc.yml ?

I'm using Bulma and get lots of Warnings, as described here

https://github.com/nuxt/nuxt.js/issues/1670#issuecomment-330078867

Unfortunately, I don't know how to translate js syntax to yml.

Thanks

[everaldo]

I guess I've found:

https://github.com/rails/webpacker/issues/1176#issuecomment-359263345

plugins:
  postcss-import: {}
  postcss-cssnext: {
    features: {
      customProperties: false
    }
  }