Webpack & PostCSS Function Mixins are not visible

Question

Current project has react, webpack and postcss. The intention here is to create global mixin. I did try a few ways and came up to the following results.

First intention

var postCSSConfig = [
  require('postcss-import'),
  // require('precss'),
  require('postcss-mixins')({
     aloha: {
       color: 'red'
     }
   }),
  require('postcss-cssnext')({
    browsers: ['last 2 versions', '> 5%'],
  }),
]

module.exports = postCSSConfig;

As a result using @mixin aloha across project or even not yet defined mixins doesn't affect stylesheets, neither gives an error.

Second intention.

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-mixins': {
      aloha: {
        color: 'red'
      }
    },
    'precss': {},
    'postcss-cssnext': {
    },
  },
};

At this point it throws an error that @mixin aloha is not defined.

Webpack config

const path = require('path'),
      webpack = require('webpack'),
      HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    'react-hot-loader/patch'
    'webpack-dev-server/client?http://localhost:8090',
    'webpack/hot/only-dev-server',
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/'
  },

  context: path.resolve(__dirname, 'logic'),
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'build'),
    publicPath: '/',
    port: 8090
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader?modules',
          'postcss-loader',
        ],
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 25000,
        },
      },
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[ext]',
        },
      }
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: './index.template.html'
    })
  ],
}

Can you please suggest what might me wrong?

Answer 1

The export in the postcss.config.js needs to be an object with a plugins property that holds an array of your plugins (which you need to import), as shown in postcss-loader - Usage.

And the postcss-mixins takes an object with the property mixin which itself is an object with the mixins, but you're giving it just the mixins directly, see postcss-mixins - Function Mixin (the mixins can be a function or an object).

Your postcss.config.js should therefore be:

module.exports = {
  plugins: [
    require('postcss-import'),
    // require('precss'),
    require('postcss-mixins')({
      mixins: {
        aloha: {
          color: 'red'
        }
      }
    }),
    require('postcss-cssnext')({
      browsers: ['last 2 versions', '> 5%'],
    })
  ]
};