Skip to content
Permalink
master
Go to file
Latest commit 23a05de Jun 14, 2017 History
1 contributor

Users who have contributed to this file

63 lines (49 sloc) 1.48 KB

Exporting values variables

You can export values with css modules similar to using variables in less or sass.

Just ensure you are using postcss and the postcss-modules-values plugin

Now you set up your values/variables

colors.css

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

then import them into your components css module

demo.css

/* import your colors... */
@value colors: "./colors.css";
@value blue, red, green from colors;

.button {
  color: blue;
  display: inline-block;
}

Example webpack.config for postcss-modules-values

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 })
  ]

};
You can’t perform that action at this time.