项目作者: swenyang

项目描述 :
Transform CSS camel-case class names to dashed-case in css-loader
高级语言: JavaScript
项目地址: git://github.com/swenyang/css-loader-dashed-class-names.git
创建时间: 2017-04-20T05:52:57Z
项目社区:https://github.com/swenyang/css-loader-dashed-class-names

开源协议:MIT License

下载


css-loader-dashed-class-names

Transform CSS camel-case class names to dashed-case in css-loader.

This library relies on getLocalIdent of css-loader, which requires webpack >= 2.2.1.

How to use

Install

  1. npm i --save-dev css-loader-dashed-class-names

Webpack Configuration

webpack.config.js

  1. const precss = require('precss')
  2. const autoprefixer = require('autoprefixer')
  3. const postcssModuleValues = require('postcss-modules-values')
  4. const { dashedCssClassName } = require('css-loader-dashed-class-names')
  5. // put css-loader in module.rules
  6. {
  7. test: /\.css$/,
  8. use: [
  9. {
  10. loader: 'style-loader',
  11. },
  12. {
  13. loader: 'css-loader',
  14. options: {
  15. modules: true,
  16. importLoaders: '1',
  17. localIdentName: '[name]-[local]',
  18. getLocalIdent: dashedCssClassName,
  19. },
  20. },
  21. {
  22. loader: 'postcss-loader',
  23. options: {
  24. plugins: () => [
  25. precss,
  26. autoprefixer,
  27. postcssModuleValues,
  28. ],
  29. },
  30. },
  31. ],
  32. },

JS/CSS

AwesomeComponent.css

  1. .myRoot {
  2. color: #f00;
  3. }

AwesomeComponent.js

  1. import React, { Component } from 'react'
  2. import styles from './AwesomeComponent.css'
  3. export default class AwesomeComponent extends Component {
  4. render() {
  5. return (
  6. <div className={styles.myRoot}>
  7. You are awesome!
  8. </div>
  9. )
  10. }
  11. }

Output

  1. .awesome-component-my-root {
  2. color: #f00;
  3. }