@stijnvanhulle/css-vars-loader

Loader to use config.json file as css variables. This puts the declaration at the end of your base css file. This is based on what the less-loader is using for setting the less-option modify vars. See --modify-var less cli command for more information.

lessc --modify-var

Getting Started

To begin, you'll need to install @stijnvanhulle/css-vars-loader:

$ npm install @stijnvanhulle/css-vars-loader --save-dev

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: `@stijnvanhulle/css-vars-loader`,
            options: { ...options },
          },
        ],
      },
    ],
  },
};

And run webpack via your preferred method.

Options

modifyVars

Type: modifyVars Default: undefined

Object with all colours you wan to use as css variables

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: `@stijnvanhulle/css-vars-loader`,
        options: {
          modifyVars: {
            'primary-color': 'blue',
          },
        },
      },
    ],
  },
};

file

Type: file Default: undefined

The file where you want to append the css variables, see ResourcePath for path format

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: `@stijnvanhulle/css-vars-loader`,
        options: {
          modifyVars: {
            'primary-color': 'blue',
          },
          file: Path.resolve('./css/global.css'),
        },
      },
    ],
  },
};

Examples

config.js

{
  "primary-color": "#000"
}

global.css

html {
  background: white;
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: `@stijnvanhulle/css-vars-loader`,
        options: {
          modifyVars: require('./config.js'),
          file: Path.resolve('./global.css'),
        },
      },
    ],
  },
};

bundle.css

html {
  background: white;
}

:root {
  --primary-color: #000;
}

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT