Skip to content

Nyan CSS webpack loader that converts CSS Modules into React/Preact components

Notifications You must be signed in to change notification settings

nyancss/nyancss-css-modules-loader

Repository files navigation

@nyancss/css-modules-loader

Nyan CSS webpack loader that converts CSS Modules (provided by css-loader) into components (React/Preact/Vue.js/etc.).

For the introduction into Nyan CSS and other docs, see the main repo. Read further for instruction on setting up the loader.

Installation

React/Preact

npm install --save-dev @nyancss/css-modules-loader @nyancss/react
# or using yarn
yarn add --dev @nyancss/css-modules-loader @nyancss/react

Vue.js

npm install --save-dev @nyancss/css-modules-loader @nyancss/vue
# or using yarn
yarn add --dev @nyancss/css-modules-loader @nyancss/vue

Class names

npm install --save-dev @nyancss/css-modules-loader @nyancss/class-names
# or using yarn
yarn add --dev @nyancss/css-modules-loader @nyancss/class-names

Configuration

Basic confuguration

// ...
{
  test: /\.css$/,
  use: [
    'style-loader',
    '@nyancss/css-modules-loader/REPLACE_ME', // 👈 Add the loader
    // Use '@nyancss/css-modules-loader/react' for React
    // Use '@nyancss/css-modules-loader/preact' for Preact
    // Use '@nyancss/css-modules-loader/vue' for Vue
    // Use '@nyancss/css-modules-loader/class-names' for class names
    { loader: 'css-loader', options: { modules: true } }
  ]
},
// ...
// ...
{
  test: /\.css$/,
  use: [
    '@nyancss/css-modules-loader/REPLACE_ME', // 👈 The loader **before** the plugin
    { loader: MiniCssExtractPlugin.loader }, // 👈 mini-css-extract-plugin
    { loader: 'css-loader', options: { modules: true } }
  ]
},
// ...

Related packages

Changelog

See the changelog.

License

MIT © Sasha Koss