CSS Modules

相对于正常css加入了块级作用域和模块依赖

目的是为了保证某个组件的样式而不会影响其他组件的样式

使用webpack的css-loader插件来实现css modules

在webpack.config.js中配置css modules

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

style-loader!css-loader?modules
css-loader后加入查询参数modules代表打开了css modules功能
如何产生局部作用域？
使用唯一的class名字，不会与其他选择器重名

如何保证class名唯一？

通过构建工具将类名编译成一个哈希字符串，css和js都会同时编译成唯一的哈希字符串

如何表示全局作用域？

:global(.className)语法，声明一个全局规则，该class不会被编译成哈希字符串

:global(.title){
	color:green;
}

App.js中直接引用的话是引用全局规则：

import React from 'react';
import styles from './App.css';

export default()=>{
	return (
  <h1 className = 'title'>
    Hello World
    </h1>
  );
};

webpack.config.js可以定制哈希字符串的格式

css-loader默认哈希算法是[hash:base64]

module: {
  loaders: [
    // ...
    {
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

class Modules中的继承

依赖composes属性

.className{
	background-color:blue;
  
}

.title{
	composes:className;
  color:red;
}

编译后会变成这样：

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

此时：title上具有className的属性

输入其他模块的规则继承

.title{
	composes:className from './another.css';
  color:red;
}

定义和引用变量

css modules支持变量，需要安装PostCss和postcss-module-values

$ npm install --save postcss-loader postcss-modules-values
加入postcss-loader到webpack.config.js

var values = require('postcss-modules-values');

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]//添加postcss
  
};

在其中一个css文件中定义变量，例如colors.css

@value blue : #0c77f8;

然后可以在其他css文件中引用该变量

@value colors: './colors.css';
@value blue from colors;

.title{
  background-color:blue
}