项目作者: nyancss

项目描述 :
Nyan CSS webpack loader that converts CSS Modules into React/Preact components
高级语言: JavaScript
项目地址: git://github.com/nyancss/nyancss-css-modules-loader.git
创建时间: 2017-06-30T11:52:03Z
项目社区:https://github.com/nyancss/nyancss-css-modules-loader

开源协议:

下载


@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

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

Vue.js

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

Class names

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

Configuration

Basic confuguration

  1. // ...
  2. {
  3. test: /\.css$/,
  4. use: [
  5. 'style-loader',
  6. '@nyancss/css-modules-loader/REPLACE_ME', // 👈 Add the loader
  7. // Use '@nyancss/css-modules-loader/react' for React
  8. // Use '@nyancss/css-modules-loader/preact' for Preact
  9. // Use '@nyancss/css-modules-loader/vue' for Vue
  10. // Use '@nyancss/css-modules-loader/class-names' for class names
  11. { loader: 'css-loader', options: { modules: true } }
  12. ]
  13. },
  14. // ...

Usage with mini-css-extract-plugin

  1. // ...
  2. {
  3. test: /\.css$/,
  4. use: [
  5. '@nyancss/css-modules-loader/REPLACE_ME', // 👈 The loader **before** the plugin
  6. { loader: MiniCssExtractPlugin.loader }, // 👈 mini-css-extract-plugin
  7. { loader: 'css-loader', options: { modules: true } }
  8. ]
  9. },
  10. // ...

Changelog

See the changelog.

License

MIT © Sasha Koss